





20 小 时 全 程 同步 视频 教学 录像 ， 全 部 由 一 线 教学 和 开发 人 员 讲 解 ， | -9 
P 和 和 发 










发 技能 是 双色 
生 业 应 用 案例 。 让 您 看 得 懂 、 学 得 会 、 做 如 
得 出 ， 将 最 实用 的 秘籍 融入 每 个 案例 中 ， 教 您 快速 成 为 APP 和 移动 了 一 
网 站 开发 高 手 印 | 














和 和 攀 碟 网 站 玉 发 
案例 课 管 













书 中 案例 的 视频 讲解 和 素材 源 文件 DYD 


人 本 书 实例 素材 文件 (BO HTML 标 签 速 查 表 
书 附 赠 人 @ 教学 幻灯 片 例 精彩 网 站 配色 方案 赏析 
大 量 资源 @ 本 书 精 品 教学 视频 全 CSS+DIV 布 局 赏析 案例 


(0 网 页 样式 与 布局 案例 赏析 。 ”(0) Web 前 端 工 程 师 常见 面试 题 
@ Dreamweaver 快捷 键 和 技巧 


青 华 大 学 出 版 社 


网 站 开发 案例 课堂 


APP 和 移动 网 站 开发 案例 课堂 


刘 玉 红 请 娟 编著 


清华 大 学 出 版 社 


北京 


内 容 简 介 


本 书 以 零 基础 讲解 为 宗旨 ,用 实例 引导 读者 深入 学 习 , 采取 “HTML 5 网 页 开发 一 CSS3 美化 网 页 一 jQuery 
Mobile 移动 技术 一 移动 网 站 和 APP 开发 实战 ”的 讲解 模式 , 深入 浅 出 地 讲解 APP 和 移动 网 站 开发 的 各 项 技术 

本 书 第 1 篇 “HTML 5 网 页 开发 ”主要 讲解 HTML 5 入 门 知识 、HTML 5 网 页 文档 结构 、HTML 5 网 页 中 
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CSS 3 概述 与 基本 语法 、 使 用 CSS 3 美化 网 页 字体 与 段落 、 使 用 CSS 3 美化 表格 和 表单 样式 、 美 化 图 片 、 背 景 
和 边框 等 ; 第 3 篇 “jQuery Mobile 移动 技术 ”主要 讲解 JavaScript 和 jQuery、HTML 5、CSS 3 和 JavaScript 
的 综合 应 用 ， 熟 悉 jQuery Mobile、jQuery Mobile UI 组 件 、jQuery Mobile 事件 、 数 据 存储 和 读 取 技术 等 ; 第 4 
篇 “移动 网 站 和 APP 开发 实战 ”主要 讲解 插件 的 使 用 与 开发 、 将 移动 网 站 封装 成 APP、 家 庭 记 账本 APP 实战 、 
连锁 酒店 订购 系统 实战 。 

本 书 适 合 任何 想 学 习 移动 网 站 和 APP 开发 的 人 员 ， 无 论 您 是 否 从 事 计 算 机 相关 行业 ， 无 论 您 是 否 接触 过 
移动 网 站 和 APP， 通 过 本 书 的 学 习 均 可 快速 掌握 移动 网 站 和 APP 开发 的 方法 和 技巧 。 
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前 言 


“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 网 站 开发 和 数据 库 初学 者 量 身 定做 的 一 套 学 习 
用 书 ， 由 刘 玉 红 策划 ， 千 谷 网 络 科技 实 训 中 心 的 高 级 讲师 编著 ， 整 套 书 涵 盖 网 站 开发 、 数 据 
库 设 计 等 方面 。 整 套 书 具 有 以 下 特点 。 

前 沿 科技 


无 论 是 网 站 建设 、 数 据 库 设计 还 是 HTML 5、CSS 3， 我 们 都 精 选 较为 前 沿 或 者 用 户 群 最 
大 的 领域 推进 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 


权威 的 作者 团队 


组 织 国家 重点 实验 室 和 资深 应 用 专家 联手 编著 该 套图 书 ， 融 合 丰 富 的 教学 经 验 与 优秀 的 
管理 理念 。 
学 习 型 案例 设计 


以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 同步 多 媒体 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 使 用 过 程 中 的 各 种 应 用 技能 ， 降 低 难度 ， 提 升学 习 效率 。 


为 什么 要 写 这 样 一 本 书 


原生 应 用 程序 APP 的 开发 费用 比较 高 ， 用 时 比较 长 ，jQuery Mobile 函数 库 的 出 现 则 很 好 
地 解决 了 这 一 问题 ， 将 HTML 5 新 技术 和 jQuery Mobile 搭配 使 用 ， 开 发 出 的 网 站 和 普通 APP 
没有 区 别 ， 受 到 了 广大 客户 的 欢迎 。 目 前 学 习 和 关注 APP 移动 网 站 开发 的 人 越 来 越 多 ， 而 很 
多 初学 者 都 苦于 找 不 到 一 本 通俗 易 懂 、 容 易 入 门 和 案例 实用 的 参考 书 。 通 过 本 书 的 案例 实 
训 ， 可 以 很 快 地 上 手 流行 的 工具 ， 提 高 职业 化 能 力 ， 从 而 帮助 解决 公司 与 学 生 的 双重 需求 
问题 。 


本 书 特 色 


@ 零 基础 、 入 门 级 的 讲解 

无 论 您 是 否 从 事 计算 机 相关 行业 ， 无 论 您 是 否 接触 过 APP 和 移动 网 站 ， 都 能 从 本 书 中 找 
到 最 佳 起 点 。 

@ ” 超 多 、 实 用 、 专 业 的 范例 和 项 目 

本 书 在 编排 上 紧密 结合 深入 学 习 APP 和 移动 网 站 技术 的 先后 过 程 ， 从 HTML 5 的 基本 概 
念 开 始 ， 带 大 家 逐步 深入 地 学 习 各 种 应 用 技巧 ， 侧 重 实战 技能 ， 使 用 简单 易 懂 的 实际 案例 进 
行 分 析 和 操作 指导 ， 让 读者 读 起 来 简明 轻松 ， 操 作 起 来 有 章 可 循 。 
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e。 随时 检测 自己 的 学 习 成 果 

每 章 首页 中 ， 均 提供 了 学 习 目 标 ， 以 指导 读者 重点 学 习 及 学 后 检查 。 

大 部 分 章 最 后 的 “ 跟 我 练 练 手 ” 板 块 ， 均 根据 本 章 内 容 精 选 而 成 ， 读 者 可 以 随时 检测 自 
己 的 学 习 成 果 和 实战 能 力 ， 做 到 融会 贯 

e 细致 入 微 、 贴 心 提示 

本 书 在 讲解 过 程 中 ， 在 各 章 中 使 用 了 “注意 ”“ 提 示 ”“ 技 巧 ” 等 小 栏目 ， 使 读者 在 学 
习 过 程 中 更 清楚 地 了 解 相关 操作 、 理 解 相关 概念 ， 并 轻松 掌握 各 种 操作 技巧 。 

® ”专业 创作 团队 和 技术 支持 


NN 本 书 由 千 谷 网 络 科技 实 训 中 心 编著 和 提供 技术 支持 。 您 在 学 习 过 程 中 遇 到 任何 问题 ， 可 
加 入 QQ 群 221376441 进行 提问 ， 专 家 人 员 会 在 线 答疑 。 
“移动 网 站 和 APP 开发 ”学 习 最 佳 途 径 


本 书 以 学 习 “ 移 动 网 站 和 APP 开发 ”的 最 佳 制作 流程 来 分 配 章节 ， 从 最 初 的 HTML 5 基 
本 概念 开始 ， 然 后 讲解 了 CSS 3 美化 网 页 技术 、jQuery Mobile 移动 等 。 同 时 在 最 后 的 项 目 实 
战 环节 特意 补充 了 两 个 移动 网 站 和 APP 的 开发 过 程 ， 以 便 更 进一步 提高 读者 的 实战 技能 。 


第 1 篇 【HTML5 网 页 开发 ] amas | 一 种 Pit 结 构 | 一 文本 和 图 mE ead re ，[ 商 主 
生计 ee le 产 制 形 | 多 如 应 用 


YWeb 应 用 程序 


第 2 篇 [C353 美 化 网 页 | — | A | Pe | x pa 

第 3 篇 【jQuery Mobile 移 动 技术 】 Te | ee 一 | ee roie pe ele es loone 
站 

数据 存 佳 和 读 职 技术 

| 本 Teuery 插 件 的 使 用 与 开发 “| 一 基 | 将 移动 网 站 封装 成 4PP | 一 扣 | 家 许 记 账本 PP 实 成 一 区 | 连锁 相 店 订购 系统 安 志 


超 值 光盘 

。 ”全 程 同步 教学 录像 

涵盖 本 书 所 有 知识 点 ， 详 细 讲 解 每 个 实例 与 项 目的 过 程 及 技术 关键 点 ， 比 看 书 更 轻松 地 
掌握 书 中 所 有 的 APP 和 移动 网 站 开发 知识 ， 而 且 扩展 讲解 部 分 能 得 到 比 书 中 更 多 的 收获 。 


e” 超 多 容量 王牌 资源 大 放送 
赠送 大 量 王 牌 资源 ， 包 括 本 书 案例 源 代码 、 教 学 幻灯 片 、 本 书 精品 教学 视频 、HTML 5 





































































































































































































标签 速 查 手册 、CSS 属性 速 查 表 、jQuery Mobile 事件 参考 手册 、CSS+DIV 布局 赏析 案例 、 
精彩 网 站 配色 方案 赏析 、 网 页 样式 与 布局 案例 赏析 等 。 


读者 对 象 


没有 任何 APP 和 移动 网 站 开发 基础 的 初学 者 

有 一 定 的 HTML 5 和 CSS 3 基础 ， 想 精通 APP 和 移动 网 站 开发 的 人 员 
有 一 定 的 HIML 5 和 CSS 3 基础 ， 没 有 项 目 经 验 的 人 员 

正在 进行 毕业 设计 的 学 生 

大 专 院 校 及 培训 学 校 的 老师 和 学 生 


创作 团队 


本 书 由 刘 玉 红 和 蒲 娟 编著 ， 参 加 编写 的 人 员 还 有 刘 玉 萍 、 周 佳 、 付 红 、 李 园 、 郭 广 新 、 
侯 永 岗 、 王 攀登 、 刘 海松 、 孙 若 淞 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 夫 、 梁 云 梁 和 周 浩 浩 。 
在 编写 过 程 中 ， 我 们 竭尽 所 能 地 将 最 好 的 讲解 呈现 给 读者 ， 但 难免 有 踢 漏 和 不 妥 之 处 ， 敬 请 
读者 不 音 指 正 。 如 读者 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 何 建议 ， 可 写 信 至 邮箱 
357975357@qq.com。 
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HTML 5 快速 入 门 

HTML 5 网 页 文档 结构 
HTML 5 网 页 中 的 文本 和 图 像 
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用 HTML 5 创建 表格 和 表单 
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构建 离线 Web 应 用 





网 络 已 经 成 为 人 们 生活 、 工 作 当 中 不 可 缺少 的 一 部 分 ， 而 网 页 就 是 呈现 给 人 们 
信息 的 平台 。 因 此 ， 怎 样 把 自己 想 要 表达 的 信息 很 好 地 呈现 在 网 页 当中 ， 就 成 了 


大 
们 的 一 个 研究 课题 一 一 网 页 设计 与 制作 。 制 作 网 页 可 采用 可 视 化 编辑 软件 ， 但 是 无 
论 采 用 哪 一 种 网 页 编辑 软件 ， 最 后 都 是 将 所 设计 的 网 页 转化 为 HTML 语言 ， 当 前 
最 新 的 版 本 是 HTML 5， 
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1.1 HTML 5 简介 


HTML 语言 是 用 来 描述 网 页 的 一 种 语言 ， 该 语言 是 一 种 标记 语言 (标记 语言 是 一 套 标记 标 
签 ，HIML 使 用 标记 标签 来 描述 网 页 )， 而 不 是 编程 语言 ， 它 是 制作 网 页 的 基础 语言 ， 主 要 用 





1 


于 描述 超 文本 中 内 容 的 显示 方式 。 


HTML 5 简介 


HTML 5 是 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0 标准 的 HTML 标准 
版 本 ， 现 在 仍 处 于 发 展 阶段 ， 但 大 部 分 浏览 器 已 经 开始 支持 某 些 HTML 5 技术 。 当 前 HTML 
5 对 多 媒体 的 支持 功能 更 强 ， 其 新 增 功能 如 下 。 


) 


站 注 


新 增 语义 化 标签 ， 使 文档 结构 明确 。 
新 的 文档 对 象 模型 (DOM)。 

实现 2D 绘图 的 Canvas 对 象 。 

可 控 媒 体 播放 。 


跨 文档 消息 。 
浏览 器 历史 管理 。 
MIME 类 型 和 协议 注册 。 
对 于 这 些 新 功能 ， 支 持 HTML 5 的 浏览 器 ， 在 处 理 HTML 5 代码 错误 的 时 候 会 更 
灵活 ; 而 那些 不 支持 HTML 5 的 浏览 器 ， 将 忽略 HTML 5 代码 。 














HTML 5 的 最 大 优势 是 语法 结构 非常 简单 ， 其 具有 以 下 特点 。 


HTML 5 编写 简单 。 即 使 用 户 没有 任何 编程 经 验 ， 也 可 以 轻易 使 用 HTML 来 设计 网 
页 ，HTML 5 的 使 用 只 需 将 文本 加 上 一 些 标记 (Tags) 即 可 。 

HTML 标记 数目 有 限 。 在 W3C 所 建议 使 用 的 HTML 5 规范 中 ， 所 有 的 控制 标记 都 
是 固定 的 且 数 目 也 是 有 限 的 。 所 谓 固定 是 指控 制 标记 的 名 称 固定 不 变 ， 且 每 个 控制 
标记 都 已 被 定义 过 ， 其 所 提供 的 功能 与 相关 属性 的 设置 都 是 固定 的 。 这 是 因为 
HTML 中 只 能 引用 Strict DID、Transitional DTD 或 Frameset DID 中 的 控制 标记 ， 且 
HTML 并 不 允许 网 页 设计 者 自行 创建 控制 标记 ， 所 以 控制 标记 的 数目 是 有 限 的 ， 设 
计 者 在 充分 了 解 每 个 控制 标记 的 功能 后 ， 就 可 以 设计 Web 页 面 了 。 

HTML 语法 较 弱 。 在 W3C 制定 的 HTML 5 规范 中 ， 对 于 HTML 5 在 语法 结构 上 的 
规格 限制 是 较 松 散 的 ， 如 <HTML>、<Html> 或 <html> 在 浏览 器 中 具有 同样 的 功能 ， 
是 不 区 分 大 小 写 的 。 另 外 ，HTML 中 也 没有 严格 要 求 每 个 控制 标记 都 要 有 相对 应 的 
结束 控制 标记 ， 如 标记 <tr> 就 不 一 定 需要 它 的 结束 标记 </tr>。 





HTML 5 最 基本 的 语法 是 “< 标记 符 ></ 标 记 符 >”。 标 记 符 通常 都 是 成 对 使 用 ， 有 一 个 开 
头 标记 和 一 个 结束 标记 。 结 束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 枉 “/”。 当 浏览 器 收 到 
HTML 文件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 把 标记 符 相 对 应 的 功能 表达 出 来 。 


1.1.2 HTML 5 文件 的 基本 结构 


一 个 完整 的 HTML 5 文件 包括 标题 、 段 落 、 列 表 、 表 格 、 绘 制 的 图 形 以 及 各 种 嵌入 对 





一 个 HTML 5 文件 的 基本 结构 如 下 。 
<!DOCTYPE html> 

<html> 文件 开始 的 标记 
<head> 文档 头 部 开始 的 标记 
eh 文件 头 的 内 容 
</head> 文档 头 部 结束 的 标记 
<body> 文件 主体 开始 的 标记 
se 文档 主体 内 容 
</body> 文件 主体 结束 的 标记 
</html> 文件 结束 的 标记 


从 上 面 的 代码 可 以 看 出 ， 在 HTML 文件 中 ， 所 有 的 标记 都 是 相对 应 的 ， 开 头 标记 为 < >， 
结束 标记 为 </>， 在 这 两 个 标记 中 间 添 加 内 容 。 这 些 基本 标记 的 使 用 方法 及 详细 解释 会 在 下 面 
的 章节 呈现 。 


1.2 HTML 5 文件 的 编写 方法 


HTML 5 文本 的 编写 方法 有 两 种 ， 分 别 如 下 。 
e 手工 编写 HTML 文件。 
e@ ”使 用 HTML 编辑 器 。 


1.2.1 ”案例 1 一 一 手工 编写 HTML 5 


由 于 HTML 5 是 一 种 标记 语言 ， 主 要 是 以 文本 形式 存在 ， 因 此 ， 所 有 的 记事 本 工具 都 可 
以 作为 它 的 开发 环境 。HTML 文件 的 扩展 名 为 .html 或 htm， 将 HTML 源 代码 输入 到 记事 本 并 
保存 之 后 ， 可 以 在 浏览 器 中 打开 文档 以 查看 其 效果 。 
【 例 1.1】 使 用 记事 本 编写 HTML 文件 
具体 操作 步骤 如 下 。 
EC 单 击 Windows 桌面 上 的 【开始 】 按 钮 ， 选 择 【 所 有 程序 】 关 【附件 】 关 【记事 
本 】 命 令 ， 打开 一 个 记事 本 ， 在 记事 本 中 输入 HTML 5 代码 ， 如 图 1-1 所 示 。 
EDpy 编辑 完 HTML 5 文件 后 ， 选 择 【文件 】 关 【保存 】 命 令 或 按 Ctrl+s 快捷 键 ， 在 
弹出 的 【另存 为 】 对 话 框 中 ， 选 择 【 保 存 类 型 】 为 【所 有 文件 】， 然 后 将 文件 扩展 
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名 设 为 .html 或 .htm， 如 图 1-2 所 示 。 











文件 () 鲍 颖 (E) 格式 (O) 下 看 (V) 医 各 (H) 
<!DOCTYPE HTHL> 
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图 1-1 编辑 HTML 代码 1-2 【另存 为 】 对 话 框 
EECSp 单 击 【保存 】 按 钮 ， 保 存 文 件 。 打 开 网 页 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 1-3 
所 示 。 
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1-3 ”网 页 的 浏览 效果 


使 用 记事 本 可 以 编写 HTML 文件 ， 但 是 编写 效率 太 低 ， 对 于 语法 错误 及 格式 都 
证 没有 提示 。 


1.2.2 ”案例 2 一 一 使 用 HTML 编辑 器 


使 用 HTML 编辑 器 可 以 弥补 记事 本 编写 HTML 文件 的 缺陷 。 在 众多 专门 编辑 HTML 网 
页 的 编辑 器 中 ，Adobe 公司 出 品 的 Dreamweaver CC 用 户 界面 非常 友好 ， 是 一 个 非常 优秀 的 网 
页 开发 工具 ， 并 深 受 广大 用 户 的 喜爱 。Dreamweaver CC 的 主 界面 如 图 1-4 所 示 。 

1. 文档 窗口 

文档 窗口 位 于 界面 的 中 部 ， 是 用 来 编排 网 页 的 区 域 ， 与 在 浏览 器 中 的 结果 相似 。 在 文档 
窗口 中 ， 可 以 将 文档 分 为 3 种 视图 显示 模式 。 


e 【代码 】 视 图 。 使 用 【代码 】 视 图 ， 可 以 在 文档 窗口 中 显示 当前 文档 的 源 代码 ， 也 
可 以 在 该 窗口 中 直接 输入 HTML 代码 。 
【设计 】 视 图 。【 设 计 】 视 图 下 ， 无 须 编辑 任何 代码 ， 直 接 使 用 可 视 化 的 操作 编辑 网 页 。 
【 拆 分 】 视 图 。【 拆 分 】 视 图 下 ， 左 半 部 分 显示 代码 视图 ， 右 半 部 分 显示 设计 视 
图 。 在 这 种 视图 模式 下 ， 可 以 通过 输入 HTML 代码 ， 直 接 观 看 效果 ， 还 可 以 通过 
【设计 】 视 图 插入 对 象 ， 直 接 查看 源 文件 。 
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图 1-4 Dreamweaver CC 的 主 界面 


在 各 种 视图 间 切 换 ， 只 需 在 文档 工具 栏 中 单 击 相应 的 视图 按钮 即 可 ， 文 档 工具 栏 如 图 1-5 
所 示 。 











图 1-5 文档 工具 栏 
2 【插入 ] 面板 TREE 
【插入 】 面 板 在 【设计 】 视 图 下 ， 是 使 用 频 度 很 高 的 面 |. 要 
板 之 一 。【 插 入 】 面 板 默认 打开 的 是 【常用 】 页 ， 包 括 了 最 可 
常用 的 一 些 对 象 ， 例 如 ， 在 文档 中 的 光标 位 置 插入 一 段 文本 、 sa 
图 像 或 表格 等 。 用 户 可 以 根据 需要 切换 到 其 他 页 ， 如 图 1-6 2 
所 示 。 国有 
3. 【属性 了 面板 Be 
四 这 | 


























【属性 】 面 板 中 主要 包含 当前 选择 的 对 象 相关 属性 设 
置 。 可 以 通过 选择 菜单 栏 中 的 【窗口 】>【 属 性 】 命 令 或 按 ” 图 1-6 【插入 】 面 板 包含 的 页 
Ctrl+F3 快捷 键 ， 打 开 或 关闭 【属性 】 面 板 。 

【 属性】 面板 是 常用 的 一 个 面板 ， 因 为 无 论 要 编辑 哪个 对 象 的 属性 ， 都 要 用 到 它 。 其 内 
容 也 会 随 着 选择 对 象 的 不 同 而 改变 ， 例 如 ， 当 光标 定位 在 文档 窗口 文字 内 容 部 分 时 ，【 属 
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性 】 面 板 将 显示 文字 的 相关 属性 ， 如 图 1-7 所 示 。 
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图 1-7 文字 对 象 的 【属性 】 面 板 


Dreamweaver CC 中 还 有 很 多 面板 ， 在 以 后 使 用 时 再 详细 讲解 。 打 开 的 面板 越 多 ， 编 辑 文 
档 的 区 域 会 越 小 。 为 了 编辑 文档 的 方便 ， 可 以 通过 F4 功能 键 快速 隐藏 和 显示 所 有 面板 。 
【 例 1.2】 使 用 Dreamweaver CC 编写 HTML 文件 
有 具体 操作 步骤 如 下 。 
EEIDp 启动 Dreamweaver CC， 如 图 1-8 所 示 ， 在 欢迎 屏幕 中 的 【新 建 】 栏 中 选择 
HTML 选项 ， 或 者 单 击 菜单 中 的 【文件 】>【 新 建 】 命 令 ( 快 捷 键 为 Cul+N)。 
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图 1-8 包含 欢迎 屏幕 的 主 界面 


了 TZ 弹出 【新 建文 档 】 对 话 框 ， 如 图 1-9 所 示 ， 在 【页 面 类 型 】 列 表 框 中 ， 选 择 
HTML 选项 。 











EE | 











1-9 【新 建文 档 】 对 话 框 





图 1-10 【设计 】 视 图 下 显示 创建 的 文档 
EEEEZ 在 文档 工具 栏 中 ， 单 击 【 代 码 】 按 钮 ， 切 换 到 【代码 】 视 图 ， 如 图 1-11 所 示 。 


L=LaEzol 





图 1-11 【代码 】 视 图 下 显示 创建 的 文档 


EEID 修改 HTML 文档 标题 ， 将 代码 中 <title> 标 记 中 的 “无 标题 文档 ”修改 成 “我 的 
第 一 个 网 页 ”。 

TB 在 <body> 标 记 中 输入 “今天 我 使 用 Dreamweaver CC 编写 了 第 一 个 简单 网 页 ， 感 
觉 非常 高 兴 。”， 完 整 的 HTML 代码 如 下 。 
<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


<title> 我 的 第 一 个 网 页 </title> 
</head> 


| 


oO 
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<body> 
今天 我 使 用 Dreamweaver CC 编写 了 第 一 个 简单 网 页 ， 感 觉 非常 高 兴 。 
</body> 
</html> 

国保 存 文件 。 选 择 菜 单 栏 中 的 【文件 】>【 保 存 】 命 令 或 按 Ctrl+S 快捷 键 ， 弹 出 
【另存 为 】 对 话 框 。 在 对 话 框 中 ， 选 择 保存 位 置 并 输入 文件 名 ， 单 击 【 保 存 】 按 
钮 ， 如 图 1-12 所 示 。 加 

GET 单 击 文档 工具 栏 中 的 [ 辐 | 按 钮 ， 选 择 查看 网 页 的 浏览 器 ， 或 按 F12 功能 键 使 用 默 
认 浏 览 器 查看 网 页 ， 预 览 效果 如 图 1-13 所 示 。 
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图 1-12 保存 文件 图 1-13 ”浏览 器 预览 效果 


1.3 ”使 用 浏览 器 查看 HTML 5 文件 


使 用 浏览 器 不 仅 可 以 查看 THML 5 文件 的 显示 效果 ， 还 可 以 直接 查看 THML 5 文件 的 源 
代码 。 本 章节 将 学 习 使 用 浏览 器 查看 THML 5 文件 的 方法 和 技巧 。 


1.3.1 各 大 浏览 器 与 HTML 5 的 兼容 


浏览 器 是 网 页 的 运行 环境 ， 因 此 浏览 器 的 类 型 也 是 在 网 页 设计 时 会 遇 到 的 一 个 问题 。 由 
于 各 个 软件 厂商 对 HTML 的 标准 支持 有 所 不 同 ， 导 致 了 同样 的 网 页 不 同 的 浏览 器 下 会 有 不 同 
的 表现 。 

另外 ，HTML 5 新 增 的 功能 ， 各 个 浏览 器 的 支持 程度 也 不 一 致 ， 浏 览 器 的 因素 变 得 比 以 
往 传统 的 网 页 设计 更 重要 。 为 了 保证 设计 出 来 的 网 页 ， 在 不 同 的 浏览 器 上 的 效果 一 致 ， 本 书 
后 面 的 章节 中 还 会 多 次 提 及 浏览 器 。 

目前 ， 市 面 上 的 浏览 器 种 类 繁多 ， 而 Internet Explorer( 即 下 浏览 器 ) 是 占 绝对 的 主流 ， 因 
此 ， 本 书 主要 使 用 Internet Explorer 11 作为 主要 浏览 器 。 正 浏览 器 不 能 支持 的 效果 ， 将 使 用 
Firefox、Opera 或 者 其 他 能 支持 的 浏览 器 ， 这 点 请 读者 注意 。 
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双击 前 面 编写 的 HIML 文件 ,在 正 9.0 浏览 器 窗口 中 可 以 看 到 编辑 的 HTML 页 面 效果 ， 


案例 3 一 一 查看 页 面 效果 


请 参阅 图 1-3 或 图 1-13 所 示 。 





前 1 








已 经 介绍 ， 网 页 可 以 在 不 同 的 浏览 器 中 查 





看 ， 为 了 测试 网 页 的 兼容 性 ， 可 以 在 不 同 的 浏览 器 中 
打开 网 页 。 

在 非 默认 浏览 器 中 打开 网 页 的 方法 有 很 多 种 ， 在 
此 为 读者 介绍 两 种 常用 方法 。 


1.3.3 


方法 1: 选择 浏览 器 菜单 命令 【文件 】> 
【打开 】( 有 些 浏览 的 菜单 项 名 为 【打开 文 
件 】)， 选 择 要 打开 的 网 页 即 可 。 

方法 2: 在 HTML 文件 上 右 击 ， 在 弹出 的 快 
捷 菜 单 中 选择 【打开 方式 】 命 令 ， 再 选择 需 
要 的 浏览 器 ， 如 图 1-14 所 示 。 如 果 浏 览 器 
没有 出 现在 菜单 中 ， 选 择 【 选 择 程序 】 选 
项 ， 在 计算 机 中 查找 浏览 器 程序 。 


案例 4 一 一 查看 源 文件 


查看 网 页 源 代码 的 常见 方法 有 以 下 两 种 。 
方法 1: 在 打开 的 页 面 空 白 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【查看 源 】 命 令 ， 如 


图 1-15 所 示 。 
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方法 2: 在 浏览 器 菜单 栏 中 选择 【查看 】>【 源 】 命 令 ， 可 以 查看 源 文件 ， 如 图 1-16 
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图 1-15 选择 【查看 源 】 命 令 


图 1-16 选择 【 源 】 命 令 


APP 和 移动 网 站 开发 
一 一 一 案例 课堂 四 一 


pn 由 于 浏览 器 的 规定 各 不 相同 ， 有 些 浏览 器 将 【 源 】 命 名 为 【查看 源 代码 〗， 请 读 
激 。 者 注意 ， 但 是 操作 方法 完全 相同 。 
1.4 高 手 甜点 


甜点 1: 为 何 使 用 记事 本 编辑 HTML 文件 无 法 在 浏览 器 中 预览 ， 而 是 直接 在 记事 本 中 打开 ? 
很 多 初学 者 ， 保 存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 级 ， 导 


NN 致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 ， 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 单 击 右键 创建 记事 





本 文件 ， 在 给 文件 重 命名 时 ， 一 定 要 以 html 或 .htm 作为 文件 的 后 级 。 特 别 要 注意 的 是 当 
Windows 系统 的 扩展 名 是 隐藏 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 【文件 夹 选项 】 对 话 
框 中 查看 是 否 显 示 扩 展 名 。 


甜点 2: 如 何 显 示 与 隐藏 Dreamweaver CC 的 欢迎 屏幕 ? 
Dreamweaver CC 欢迎 屏幕 可 以 帮助 使 用 者 快速 进行 打开 文件 、 新 建文 件 和 相关 帮助 的 操 


作 。 如 果 读者 不 希望 显示 该 窗口 ， 可 以 按 Ctrl+U 快捷 键 ， 在 弹出 的 窗口 中 ， 选 择 左 侧 的 【党 
规 】 页 ， 将 右 侧 【 文 档 选项 】 部 分 的 【显示 欢迎 屏幕 】 复 选 框 取消 选中 。 


1.5” 跟 我 练 练 手 


练习 1: 手工 编写 HTML 5。 
练习 2: 使 用 HTML 编辑 器 。 
练习 3: 查看 页 面 效 果 。 
练习 4: 查看 源 文件 。 








因而 如 果 打 开 一 


个 网 页 源 代 码 ， 可 能 无 法 分 清 哪些 是 头 部 哪些 是 尾部 ， 而 在 HIML 5 中 则 对 这 些 进 


行 了 明确 的 规范 。 


文档 结构 ， 主 要 是 指 文章 的 内 部 结构 ， 在 网 页 中 则 表现 为 整个 页 面 的 内 部 结 


构 。 在 HIML 5 之 前 ， 并 没有 对 网 页 文档 的 结构 进行 明确 的 规范 ， 
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APP 和 移动 网 站 开发 


案例 课堂 B 一 





2.1 Web 标准 


在 学 习 HTML 5 网 页 文档 结构 之 前 ， 首 先 需要 了 解 Web 的 标准 ， 该 标准 主要 是 为 了 解决 
各 种 浏览 器 与 网 页 的 兼容 性 问题 。 


2.1.1 ”Web 标准 概述 


无 规矩 不 成 方圆 ， 对 于 网 页 设计 也 是 如 此 。 为 了 Web 更 好 地 发 展 ， 对 于 开发 人 员 和 最 终 
用 户 而 言 ， 非 常 重要 的 事情 就 是 在 开发 新 的 应 用 程序 时 ， 浏 览 器 开发 商 和 站 点 开发 商 需要 共 
同 遵守 标准 ， 这 个 标准 就 是 Web 标准 。 

Web 标准 的 最 终 目的 就 是 可 确保 每 个 人 都 有 权利 访问 相同 的 信息 。 如 果 没有 Web 标准 ， 
那么 未 来 的 Web 应 用 ， 都 是 不 可 能 实现 的 。 同 时 ，Web 标准 也 可 以 使 站 点 开发 更 快捷 ， 更 令 
人 愉快 。 

为 了 缩短 开发 和 维护 时 间 ， 未 来 的 网 站 将 不 得 不 根据 标准 来 进行 编码 。 这 样 ， 开 发 人 员 
就 不 必 为 了 得 到 相同 的 结果 ， 而 挣扎 于 多 版 本 的 开发 。 一 旦 Web 开发 人 员 遵 守 了 Web 标 
准 ， 由 于 开发 人 员 可 以 更 容易 地 理解 彼此 的 编码 ， 那 么 ，Web 开发 的 团队 协作 也 将 会 得 到 简 
化 。 因 此 ，Web 标准 在 开发 中 是 很 重要 的 。 

使 用 Web 标准 有 以 下 几 个 优点 。 


1， 对 于 访问 者 


”文件 下 载 与 页 面 显示 速度 更 快 。 

e ”内 容 能 被 更 多 的 用 户 所 访问 (包括 失明 、 视 弱 、 色 盲 等 残障 人 士 )。 

e ”内 容 能 被 更 广泛 的 设备 所 访问 (包括 屏幕 阅读 机 、 手 持 设备 、 打 印 机 等 )。 
. 

. 

















用 户 能 够 通过 样式 选择 定制 自己 的 表现 界面 。 
所 有 页 面 都 能 提供 适 于 打印 的 版 本 。 


.对 于 网 站 所 有 者 


更 少 的 代码 和 组 件 ， 容 易 维护 。 

带宽 要 求 降低 (代码 更 简洁 )， 成 本 降低 。 

更 容易 被 搜索 引擎 搜索 到 。 

改版 方便 ， 不 需要 变动 页 面 内 容 。 

提供 打印 版 本 而 不 需要 复制 内 容 。 

提高 网 站 易 用 性 。 在 美国 ， 有 严格 的 法 律 条 款 (Section 508) 来 约束 政府 网 站 必须 达到 
一 定 的 易 用 性 ， 其 他 国家 也 有 类 似 的 要 求 。 


2.1.2” Web 标准 规定 的 内 容 


Web 标准 不 是 某 一 个 标准 ， 而 是 一 系列 标准 的 集合 。 网 页 主要 由 3 部 分 组 成 ， 即 结构 
(Structure)、 表 现 (Presentation) 和 行为 (Behavior)， 那 么 ， 对 应 的 标准 也 分 3 个 方面 ， 分 别 如 下 。 
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e ”结构 化 标准 语言 ， 主 要 包括 XHTML 和 XML。 

e@ ”表现 标准 语言 ， 主 要 包括 CSS。 

@ ”行为 标准 ， 主 要 包括 对 象 模型 ， 如 W3C DOM、ECMAScript 等 。 

这 些 标准 大 部 分 由 W3C 起 草 和 发 布 。 也 有 一 些 是 其 他 标准 组 织 制定 的 标准 ， 如 
ECMA(European Computer Manufacturers Association) 的 ECMAScript 标准 。 

1. 结构 化 标准 语言 

(1) XML 语言 

XML 是 The Extensible Markup Language( 可 扩展 标识 语言 ) 的 简写 。 目 前 推荐 遵循 的 是 
W3C 于 2000 年 10 月 6 日 发 布 的 XML 1.0。 和 HTML 一 样 ，XML 同样 来 源 于 SGML， 但 
XML 是 一 种 能 定义 其 他 语言 的 语言 。XML 最 初 设计 的 目的 是 弥补 HTML 的 不 足 ， 以 强大 的 
扩展 性 满足 网 络 信息 发 布 的 需要 ， 后 来 逐渐 用 于 网 络 数据 的 转换 和 描述 。 

(2) XHTML 语言 

XHTML 是 The Extensible HyperText Markup Language( 可 扩展 超 文本 标识 语言 ) 的 缩写 。 
目前 遵循 的 是 W3C 于 2000 年 1 月 26 日 推荐 的 XML 1.0。 虽 然 XML 数据 转换 能 力 强大 ， 完 
全 可 以 替代 HTML， 但 面 对 成 千 上 万 已 有 的 站 点 ， 直 接 采 用 XML 还 为 时 过 早 ， 因 此 在 
HTML 4.0 的 基础 上 ， 用 XML 的 规则 对 其 进行 扩展 ， 得 到 了 XHTML。 简 单 地 说 ， 建 立 
XHTML 的 目的 就 是 实现 HTML 向 XML 的 过 渡 。 

2. 表现 标准 语言 

CSS 是 Cascading Style Sheets( 层 车 样式 表 ) 的 缩写 。 目 前 遵循 的 是 W3C 于 1998 年 5 月 12 
日 推荐 的 CSS2。W3C 创建 CSS 标准 的 目的 是 以 CSS 取代 HTML 表格 式 布局 、 帧 和 其 他 表 
现 的 语言 。 纯 CSS 布局 与 结构 化 XHTML 相 结合 ， 能 帮助 设计 师 分 离 外 观 与 结构 ， 使 站 点 的 
访问 及 维护 更 加 容易 。 

3. 行为 标准 

(1) DOM 标准 

DOM 是 Document Object Model( 文 档 对象 模 型 ) 的 缩写 。 根 据 W3C DOM 规范 ，DOM 是 
一 种 浏览 器 平台 语言 的 接口 ， 使 用 它 可 以 访问 页 面 其 他 的 标准 组 件 。 简 单 理解 ，DOM 解决 了 
Netscaped 的 JavaScript 和 Microsoft 的 JScript 之 间 的 冲突 ， 给 予 Web 设计 师 和 开发 者 一 个 标 
准 的 方法 ， 让 他 们 来 访问 站 点 中 的 数据 、 脚 本 和 表现 层 对 象 。 

(2) ECMAScript 标准 

ECMAScript 是 ECMA 制定 的 标准 脚本 语言 (JavaScript)。 目 前 推荐 遵循 的 是 ECMAScript 
262。 








2.2 HTML 5 文档 的 基本 结构 


HIML 5 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、 开 始 标记 、 元 信息 、 主 体 标记 和 页 
面 注释 标记 等 。 
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-案例 课堂 四 = 





2.2.1 HTML 5 结构 


在 一 个 HTML 文档 中 ， 必 须 包 含 <HTML></HMTL> 标 记 ， 并 且 放 在 一 个 HTML 文档 中 
的 开始 和 结束 位 置 ， 即 每 个 文档 以 <ZHTML> 开 始 ， 以 </HTML> 结 束 。 

<HTML></HMTL> 之 间 通 常 包 含 两 个 部 分 ， 分 别 是 <HEAD></HEAD> 和 
<BODY></BODY>。HEAD 标记 包含 HTML 头 部 信息 ， 如 文档 标题 、 样 式 定 义 等 。BODY 标 
记 包 含 文档 主体 部 分 ， 即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 

为 了 便于 读者 从 整体 上 把 握 HTML 文档 结构 ， 下 面 通过 一 个 HTML 页 面 来 介绍 HTML 
页 面 的 整体 结构 ， 示 例 代码 如 下 。 


<!IDOCTYPE HTML> 

<HTML> 

<HEAD> 
<TITLE> 网 页 标题 </TITLE> 

</HEAD> 

<BODY> 
网 页 内 容 

</BODY> 

</HTML> 

从 代码 中 可 以 看 出 ， 一 个 基本 的 HTML 页 由 以 下 几 部 分 构成 。 

@ ”<IDOCTYPE> 声 明 必须 位 于 HTML 5 文档 中 的 第 一 行 ， 也 就 是 位 于 <HTML> 标 记 之 
前 。 该 标记 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE> 声 明 不 属于 HTML 
标记 ; 它 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 标记 的 版 本 。 由 于 HTML 5 版 本 还 
没有 得 到 浏览 器 的 完全 认可 ， 后 面 介绍 时 还 采用 以 前 通用 的 标准 。 

@ <HTML></HTML> 说 明 本 页 面 使 用 HTML 语言 编写 ， 使 浏览 器 软件 能 够 准确 无 误 地 

@ <HEAD></HEAD> 是 HTML 的 头 部 标记 。 头 部 信息 不 显示 在 网 页 中 ， 此 标记 内 可 
以 保护 其 他 标记 ， 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 。 可 以 通过 
<STYLE> 标 记 定义 CSS 样式 表 ， 通 过 <SCRIPT> 标 记 定义 JavaScript 脚本 文件 。 

@ <TITLE></TITLE> 是 HEAD 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显 示 在 浏览 器 的 窗 
口 标题 栏 中 。 如 果 没 有 TITLE， 浏 览 器 标题 栏 将 显示 本 页 的 文件 名 。 

@ <BODY></BODY> 包含 HIML 页 面 的 实际 内 容 ， 显 示 在 浏览 器 窗口 的 客户 区 中 。 
例如 ， 页 面 中 的 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HIML 相关 的 内 容 ， 都 是 定义 
在 BODY 标记 里 面 。 


2.2.2 文档 类 型 说 阴 


Web 页 面 的 文档 类 型 说 明 (DOCTYPE) 被 极 大 地 简化 了 。 细 心 的 读者 会 发 现 ， 在 第 1 章 中 
使 用 Dreamweaver CC 创建 HTML 文档 时 ， 文 档 头 部 的 类 型 说 明代 码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1-0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 














上 面 为 XHTML 文档 类 型 说 明 ， 读 者 可 以 看 到 这 段 代码 既 麻 烦 又 难 记 ，HTML 5 对 文档 
类 型 进行 了 简化 ， 简 单 到 15 个 字符 就 可 以 了 ， 代 码 如 下 。 


<!DOCTYPE html> 














全 ”DOCTYPE 的 声明 需要 出 现在 HTML 5 文件 的 第 一 行 。 
注 


2.2.3 HTML 5 标记 html 


HTML 5 标记 代表 文档 的 开始 ， 由 于 HTML 5 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 
但 是 为 了 使 之 符合 Web 标准 和 文档 的 完整 性 ， 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 

HTML 5 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书写 在 开头 和 结尾 的 中 间 
部 分 。 语 法 格式 如 下 。 


<html> 


</html> 


2.2.4 ” 头 标 记 head 

头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 
脚本 代码 等 。HTML 的 头 部 信息 是 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 。 

<head> 

让 

<head> 元 素 的 作用 范围 是 整 篇 文档 ， 定 义 在 HTML 语言 头 部 的 内 容 往 往 不 会 在 网 页 上 直 
接 显 示 。 

1， 标 题 标记 title 

HTML 页 面 的 标题 一 般 是 用 来 说 明 页 面 的 用 途 ， 显 示 在 浏览 器 的 标题 栏 中 。 在 HTML 文 
档 中 ， 标 题 信息 设置 在 <head> 与 </head> 之 间 。 标 题 标记 以 <title> 开 始 ， 以 </title> 结 束 ， 语 法 
格式 如 下 。 

<title> 

ee 


在 标记 中 间 的 “...” 就 是 标题 的 内 容 ， 可 以 帮助 用 户 更 好 地 识别 页 面 。 预 览 网 页 时 ， 设 
置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 ， 此 外 ， 在 Windows 任务 栏 中 显示 的 也 是 这 个 标 
题 ， 如 图 2-1 所 示 。 
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图 2-1 标题 栏 在 浏览 器 中 的 显示 效果 


页 面 的 标题 只 有 一 个 ， 位 于 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 


2. 元 信息 标记 meta 


<meta> 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information)， 如 针对 搜索 引擎 和 更 新 频 度 的 描 
述 和 关键 词 。 

<meta> 标 记 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 记 的 属性 定义 了 与 文档 相关 联 
的 名 称 / 值 对 ，<meta> 标 签 提供 的 属性 及 取 值 ， 如 表 2-1 所 示 。 


表 2-1 <meta> 标 记 提供 的 属性 及 取 值 
属 性 值 


charset character encodin 定义 文档 的 字符 编码 
content some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 
expires 
refresh 


set-cookie 


http-equiv 把 content 属性 关联 到 HTTP 头 部 


author 
description 


om 把 content 属性 关联 到 一 个 名 称 


name 
generator 


revised 


others 


(1) 字符 集 charset 属性 
在 HTML 5 中 ， 有 一 个 新 的 charset 属性 ， 其 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 
告诉 浏览 器 ， 网 页 使 用 ISO-8859-1 字符 集 显 示 。 








G's 


<meta charset="ISO-8859-1"> 


(2) 搜索 引擎 的 关键 字 
在 早期 ，meta keywords 关键 字 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 也 是 很 多 人 进行 
网 页 优化 的 基础 。 关 键 字 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 。 


<meta name="keywords" content=" 关 键 字 , keywords" > 


说 明 : 

se 不 同 的 关键 词 之 间 ， 应 用 半角 逗号 隔 开 (英文 输入 状态 下 )， 不 要 使 用 “空格 ”或 
“|” 间 隔 。 

@ 是 keywords， 不 是 keyword。 

e@ ”关键 字 标 记 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 

例如 ， 定 义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 。 


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"” /> 


关键 字 标记 keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 ， 但 现在 已 经 被 很 多 搜索 引 
擎 完全 忽略 。 加 上 这 个 标记 对 网 页 的 综合 表现 没有 坏处 ， 但 如 果 使 用 不 恰当 ， 对 网 页 非但 没 
有 好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 字 标 记 Keywords 时 ， 要 注意 以 下 几 点 。 

e。 关键 字 标记 中 的 内 容 要 与 网 页 核心 内 容 相关 ， 确 信使 用 的 关键 词 出 现在 网 页 文本 中 。 

@ ”使 用 用 户 易于 通过 搜索 引擎 检索 的 关键 字 ， 过 于 生僻 的 词汇 不 太 适合 做 meta 标记 中 

的 关键 词 。 

®。 ”不 要 重复 使 用 关键 词 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 

@ ”一 个 网 页 的 关键 词 标 记 里 最 多 包含 3 一 5 个 最 重要 的 关键 词 ， 不 要 超过 5 个 。 

。 ”每 个 网 页 的 关键 词 应 该 不 同 。 


重地 由 于 设计 者 或 SEO 优化 者 以 前 对 meta keywords 关键 字 的 混用， 导致 目前 其 在 搜 
涝 。 索引 车 排名 中 的 作用 很 小， 


(3) 页 面 描述 

meta description 元 标记 (描述 元 标记 ) 是 一 种 HTML 元 标记 ， 用 来 简略 描述 网 页 的 主要 内 
容 ， 通 常 被 搜索 引擎 用 在 搜索 结果 页 上 展示 给 最 终 用 户 看 的 一 段 文 字 片 段 。 页 面 描 述 在 网 页 
中 不 显示 出 来 ， 使 用 格式 如 下 。 


<meta name="description" content=" 网 页 的 介绍 " /> 


例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 。 


<meta name="description"” content=" 免 费 的 Web 技术 教程 。" /> 


(4) 页 面 定时 跳 转 

使 用 <meta> 标 记 可 以 使 网 页 在 经 过 一 定时 间 后 自动 刷新 ， 这 可 通过 将 http-equiv 属性 值 设 
置 为 refresh 来 实现 。content 属性 值 可 以 设置 为 更 新 时 间 。 

在 浏览 网 页 时 ， 经 常会 看 到 一 些 欢迎 信息 的 页 面 ， 在 经 过 一 段 时 间 后 ， 这 些 页 面 会 自动 
转 到 其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定 时 刷新 跳 转 的 语法 格式 如 下 。 
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<meta http-equiv="refresh" content=" 秒 ; [url= 网 址 ] " # 


其 中 ，“[url= 网 址 ]” 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 则 页 面 定时 刷新 并 跳 转 ， 如 果 省 略 
该 部 分 ， 页 面 只 定时 刷新 ， 不 进行 跳 转 。 
例如 ， 实 现 每 5 秒 刷新 一 次 页 面 ， 将 下 述 代码 放 入 head 标记 部 分 即 可 。 


<meta http-equiv="refresh" content="5" /> 


2.2.5 网 页 的 主体 标记 body 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 它 是 HTML 文件 的 重点 所 在 。 主 体 标 记 
是 以 <body> 标 记 开 始 ， 以 </body> 标 记 结 束 ， 语 法 格式 如 下 。 


<body> 
</body> 


注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 否 则 会 造成 错误 。 
例如 ， 在 下 列 代码 中 ，<body> 开 始 标记 出 现在 <head> 标 记 内 。 


<html> 

<head> 

<title> 标 记 测试 </title> 

<body> 

</head> 

</body> 

</html> 

代码 中 的 第 4 行 <body> 开 始 标记 和 第 5 行 的 </head> 结 束 标记 出 现 了 交叉 ， 这 是 错误 的 。 
HTML 中 的 所 有 代码 不 允许 交叉 出 现 。 


2.2.6 页面 注 释 标记 <!-- --> 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 

在 HTML 源 代码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 ， 对 于 设计 者 日 后 的 代码 修 
改 、 维 护 工作 很 有 帮助 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 设计 者 也 能 很 快 读 懂 前 者 
所 撰写 的 内 容 。 

语法 如 下 。 

<!-- 注 释 的 内 容 --> 


注释 语句 元 素 由 前 后 两 部 分 组 成 ， 前 部 分 由 一 个 左 尖 括 号 、 一 个 半角 感叹 号 和 两 个 连 字 
符 组 成 ， 后 部 分 由 两 个 连 字符 和 一 个 右 尖 括号 组 成 。 

<html> 

<head> 

<title> 标 记 测 试 </title> 

</head> 


<body> 

<!-- 这 里 是 标题 --> 

<hl>HTML 5 从 入 门 到 精通 </h1> 

</body> 

</html> 

页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 ， 而 且 可 能 注释 掉 这 些 代 
码 。 如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 “<!--” 和 “-->” 
之 间 ， 例 如 ， 修 改 上 述 代码 如 下 。 





<html> 

<head> 
<title> 标 记 测试 </title> 
</head> 


--> 
</body> 
</html> 


修改 后 的 代码 ， 将 <h1> 标 记 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 


2.3 ”综合 案例 一 一 符合 W3C 标准 的 HTML 5 网 页 


下 面 将 制作 一 个 简单 的 符合 W3C 标准 的 HIML 5 网 页 ， 以 巩固 前 面 所 学 知识 。 具 体操 作 
步骤 如 下 。 





TI 启动 Dreamweaver CC ， 新 建 ‘DW ZH me BEV EAD fix(M) tt(0) 
HTML 文档 ， 单 击 文档 工具 栏 中 的 ae 一 
EEC 
【代码 】 按 钮 ， 切 换 至 代码 状态 ， 如 。。 富 面 oe 
图 2-2 所 示 。 = 
2-2 中 的 代码 是 XHTML 1.0 格 i 
式 ， 尽 管 与 HTML 5 完全 兼容 ， 但 是 加 


为 了 简化 代码 ， 将 其 修改 成 HTML 5 “bt 
规范 。 文 档 说 明 部 分 、<html> 标 记 部 分 天国 

和 <meta> 元 信息 部 分 修改 后 ，HTML 5 
基本 结构 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title>HTML 5 网 页 设计 </title> 
</head> 

<body> 

</body> 

</html> 


2-2 使 用 Dreamweaver CC 新 建 HTML 文档 
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在 网 页 主体 中 添加 内 容 ， 即 在 body 部 分 增加 如 下 代码 。 


<!-- 白 居 易 诗 --> 
<h1> 续 座右铭 </h1> 
<P> 

千里 始 足下 ， <br> 
高 山 起 微 全。<br> 
亚 道 亦 如 此 , <br> 

行 之 贵 日 新 。<br> 
</P> 


EEC 保存 网 页 ， 在 正 中 预览 效果 ， 如 图 2-3 所 示 。 
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图 2-3 网 页 预览 效果 


2.4 高 手 甜 点 


甜点 1: 在 网 页 中 ， 语 言 的 编码 方式 有 哪些 ? 


在 HIML 5 网 页 中 ，meta 标记 的 charset 属性 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 的 
类 型 ， 国 内 常用 的 是 GB 码 ， 对 于 国内 因 经 常 要 显示 汉字 ， 通 常设 置 为 GB2312( 简 体 中 文 ) 和 
UTF-8 两 种 。 英 文 是 ISO-8859-1 字符 集 ， 此 外 还 有 其 他 的 字符 集 ， 这 里 不 再 介绍 。 

甜点 2: 在 网 页 中 基本 标记 是 否 必须 成 对 出 现 ? 


在 HTML 5 网 页 中 ， 大 部 分 标记 都 是 成 对 出 现 ， 但 也 有 部 分 标记 可 以 单独 出 现 ， 如 换行 
标记 <p/>、<br>、<img/> 和 <hr/> 等 。 





2.5” 跟 我 练 练 手 


练习 1: 制作 符合 W3C 标准 的 HTML 5 网 页 。 
练习 2: 了 解 HTML 5 文档 的 基本 结构 。 























而 网 页 的 内 容 主要 是 通过 文 


字 与 图 像 来 体现 的 ， 本 章 就 来 介绍 HIML 5 网 页 中 的 文字 和 图 像 。 


























HTML 5 网 页 中 


人 全 会 1 
j= R EK 长 
栋 堪 EE 











文字 和 图 像 是 网 页 中 最 主要 也 是 最 常用 的 元 素 。 在 信息 高 速 发 展 的 今天 ， 网 站 
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3.1 在 网 页 中 添加 文本 


在 网 页 中 可 以 轻松 地 添加 文本 ， 按 照 文 字 的 类 型 划分 ， 用 户 可 以 添加 的 文本 分 为 普通 文 
本 和 特殊 字 文本 两 种 。 下 面 将 分 别 讲述 这 两 种 文本 的 添加 方法 和 技巧 。 


3.1.1 案例 1 一 一 普通 文本 的 添加 


普通 文本 是 指 汉字 或 者 在 键盘 上 可 以 直接 输入 的 字符 。 读 者 可 以 在 Dreamweaver CC【 代 
码 】 视 图 的 body 标记 部 分 直接 输入 ， 或 者 在 【设计 】 视 图 下 直接 输入 。 如 图 3-1 所 示 为 
Dreamweaver CC 的 【设计 】 视 图 ， 用 户 可 以 在 其 中 直接 输入 汉字 或 字符 。 

如 果 有 现成 的 文本 ， 可 以 使 用 复制 、 粘 贴 的 方法 把 其 他 窗口 中 需要 的 文本 复制 过 来 。 在 
粘贴 文本 的 时 候 ， 如 果 只 希望 把 文字 粘贴 过 来 ， 而 不 需要 粘贴 文字 的 格式 ， 可 以 使 用 
Dreamweaver CC 的 “选择 性 粘贴 ”功能 。 

“选择 性 粘贴 ”功能 只 在 Dreamweaver CC 的 【设计 】 视 图 中 起 作用 ， 因 为 在 【代码 】 视 
图 中 ， 粘 贴 的 仅 是 文本 ， 不 会 有 格式 。 例 如 ， 将 Word 文档 表格 中 的 文字 复制 到 网 页 中 ， 而 
不 需要 表格 结构 ， 操 作 方 法 为 : 选择 【编辑 】 关 【选择 性 粘贴 】 命 令 或 按 快 捷 键 
Ctrl+ShifttV， 弹 出 【选择 性 粘贴 】 对 话 框 ， 在 其 中 选中 【 仅 文本 】 单 选 按钮 ， 如 图 3-2 所 示 。 
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昌 带 结构 的 文本 (段落 、 列 表 、 表 格 等 ) (5) 
日 这 结构 和 1 文本 1 


- 以 及 基本 格式 ( 粗 体 、 笠 体 〉 @) 而 
同 带 结构 的 文本 以 及 全 部 格式 〈 粗 体 、 科 体 、 样 式 ) 加 ) 





保留 换行 符 EE) 
清理 Word 段落 间距 0) 
粘贴 首选 参数 F). 


千里 之 行 始 于 足下 ! 
Happy New Year! 





图 3-1 【设计 】 视 图 图 3-2 【选择 性 粘贴 】 对 话 框 


3.1.2 ”案例 2 一 一 特殊 字符 文本 的 添加 


目前 ， 很 多 行业 信息 都 出 现在 网 络 上 ， 每 个 行业 都 有 自己 的 行业 特性 ， 如 数学 、 物 理 和 
化 学 都 有 特殊 的 符号 ， 那 么 如 何在 网 页 中 添加 这 些 特殊 的 字符 呢 ? 

在 HIML 中 ， 特 殊 符号 以 “&” 开 头 ， 后面 跟 相关 特殊 字符 。 例 如 ， 大 括号 和 小 括号 被 
于 声明 标记 ， 因 此 如 果 在 HIML 代码 中 需要 输入 “<” 和 “>” 字 符 ， 就 不 能 直接 输入 了 ， 
需要 当 作 特 殊 字 符 进行 处 理 。 在 HIML 中 ， 用 “&lt” 代 表 符 号 “<”， 用 “&gt” 代 表 符 号 
“>”。 例 如 ， 输 入 公式 a>b， 在 HTML 中 需要 这 样 表示 : a&gtb。 

HTML 中 还 有 大 量 这 样 的 字符 ， 如 空格 、 版 权 等 ， 常 用 的 特殊 字符 如 表 3-1 所 示 。 















































表 3-1 特殊 字符 
显 示 说 明 HTML 编码 
半角 大 的 空白 Rensp:; 
全 角 大 的 空白 &emsp:; 
不 断 行 的 空白 格 &nbsp: 
< 小 于 &lt 
> 大 皇 &gt 
& 及 符号 &amp: 
双 引号 &quot: 
© 版 权 &ecopy: 
® 已 注册 商标 Rereg: 
wi 商标 (美国 ) hee 
x 乘 号 Retimes: 
二 除 号 &edivide: 





在 编辑 化 学 公式 或 物理 公式 时 ， 使 用 特殊 字符 的 频 度 非 常 高 。 如 果 每 次 输入 时 都 去 查询 


或 者 要 记忆 这 些 特殊 特 号 的 编码 ， 


工作 量 是 


当 大 的 。 在 此 为 读者 提供 一 些 技巧 。 


在 Dreamweaver CC 的 【设计 】 视 图 下 输入 字符 ， 如 a>b 这 样 的 表达 式 ， 可 以 直接 输 
入 。 对 于 部 分 键盘 上 没有 的 字符 可 以 借助 中 文 输入 法 的 软 键盘 。 在 中 文 输入 法 的 软 
键盘 上 右 击 ， 弹 出 特殊 类 别 项 ， 如 图 3-3 所 示 。 选 择 所 需 类 型 ， 如 选择 “数学 符 


号 ”， 弹 出 数学 相关 符号 ， 如 图 3-4 所 示 。 选 择 自己 需要 的 符号 ， 


| PC 键盘 


希腊 字母 
俄 文字 母 
注音 符号 
拼 音 
日 文平 假名 
日 文 片 假 名 


中 极 旺 五 笔 |2|-,K) 


标点 符号 
数字 序号 
数学 符号 
单位 符号 
制 表 符 
特殊 符号 


3-3 ”特殊 符号 分 类 


文字 与 文字 之 间 的 空格 ， 如 果 超 过 一 个 ， 那 么 从 第 二 个 空格 开始 ， 


即 可 输入 。 





3-4 数学 符号 


会 被 忽略 掉 。 


快捷 地 输入 空格 的 方法 是 : 将 输入 法 切换 成 中 文 输入 法 ， 并 置 于 全 角 ( 快 捷 键 为 
Shift+ 空 格 ) 状 态 ， 直 接 按键 盘 上 的 Space 键 (空格 键 ) 即 可 。 

对 于 上 述 两 种 方法 都 无 法 实现 的 字符 ， 可 以 使 用 Dreamweaver CC 的 【插入 】 菜 单 实 
现 。 选 择 【 插 入 】>HTML>【 特 殊 字符 】 命 令 ， 在 显示 的 字符 中 选择 ， 如 果 没 有 所 
需要 的 字符 ， 选 择 【 其 他 字符 】 命 令 ， 在 打开 的 【插入 其 他 字符 】 对 话 框 中 选择 即 
可 ， 如 图 3-5 所 示 。 


一 





欧 困 过 讨 半 否 壬 昼 司 SNLH_ 翰 8 中 


py A 


APP 和 移动 网 站 开发 
案例 课堂 @ 一 





























EL | CC 可 

ijs|£|#)s| -|e|*| -|® 

“| z| "| a) | -| .> AlA CR ] 
及 | 天 | 天 | 人 | El S| | 下 | | E| i 
古训 了 六 ololol5loclelm 
Vto sa al alal lle 
s ej ela|li|i|li|lr|lals 
5 sjo|=|olilalalo|y 
. ||# | | el. 
-|—| -| 叫 ，| el 









































图 3-5 【插入 其 他 字符 】 对 话 框 


入 尽量 不 要 使 用 多 个 “&nbsp” 来 表示 多 个 空格 ， 因 为 多 数 浏览 器 对 空格 距离 的 实 
证 和 现 是 不 一 样 的 。 





3.1.3 ”案例 3 一 一 使 用 HTML 5 标记 添加 特殊 文本 


在 文档 中 经 常会 出 现 重要 文本 (加 粗 显 示 )、 斜 体 文本 、 上 标 和 下 标 文 本 等 。 
1.， 重要 文本 


重要 文本 通常 以 粗 体 显示 、 强 调 方 式 显示 或 加 强调 方式 显示 。HTML 中 的 <b> 标 记 、 
<em> 标 记 和 <strong> 标 记分 别 实现 了 这 3 种 显示 方式 。 
【 例 3.1】 重 要 文本 显示 (实例 文件 ，ch03\3.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 
<p><b> 粗 体 文字 的 显示 效果 </b> </p> 
<p><em> 强 调 文字 的 显示 效果 </em> </p> 
<p><strong> 加 强调 文字 的 显示 效果 </strong></p> 
</body> 

</html> 


在 下 9.0 中 的 预览 效果 如 图 3-6 所 示 ， 实 现 了 文本 的 3 种 显示 方式 。 
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粗 体 文字 的 显示 效果 


堆 河 文 半 扩 呈 元 发 提 
加 强调 文字 的 显示 效果 








3-6 ”重要 文本 预览 效果 


0 


2. 倾斜 文本 
HTML 中 的 < 这 标记 实现 了 文本 的 倾斜 显示 ， 放 在 <i></ 记 之 间 的 文本 将 以 斜体 显示 。 
【 例 3.2】 和 斜体 文本 显示 (实例 文件 ，ch03\3.2.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<i> 斜 体 文字 的 显示 效果 </i> 
</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 3-7 所 示 ， 其 中 文字 以 斜体 显示 。 
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图 3-7 斜体 文本 预览 效果 


py A 


@: HTML 中 的 重要 文本 和 倾斜 文本 标记 已 经 过 时 ， 这 些 标记 都 应 该 使 用 CSS 样式 
来 实现 ， 而 不 应 该 是 HTML 来 实现 。 随 着 后 面 学 习 的 深入 ， 读 者 会 逐渐 发 现 ， 即 使 
” ”HTML 和 CSS 实现 相同 的 效果 ， 但 是 CSS 所 能 实现 的 控制 远 远 比 HTML 要 细致 、 精 

确 很 多 。 


3， 上 标 和 下 标 文本 


在 HIML 中 用 <sup> 标 记 实 现 上 标 文 字 ， 用 <sub> 标 记 实现 下 标 文字 。<sup> 和 <sub> 都 是 
双 标 记 ， 放 在 开始 标记 和 结束 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 
【 例 3.3】 上 标 和 下 标 文 本 显示 (实例 文件 : ch03\3.3.htmD) 


<1DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 
<!- 上 标 显示 --> 
<P>c=a<sup>2</sup>+b<sup>2</sup></P> 

<!- 下 标 显 示 --> 
<p>H<sub>2</sub>+0—H<sub>2</sub>0</p> 

</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 3-8 所 示 ， 分 别 实现 了 上 标 和 下 标 文本 的 显示 。 
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3-8 ”上 标 和 下 标 预览 效果 


3.2 文本 排版 


在 网 页 中 ， 对 文字 段落 进行 排版 ， 并 不 像 文本 编辑 软件 Word 那样 可 以 定义 许多 模板 来 
安排 文字 的 位 置 。 在 网 页 中 ， 要 让 某 一 段 文 字 放 在 特定 的 地 方 ， 是 通过 HTML 标记 来 完成 
的 。 其 中 ， 换 行使 用 <br> 标 记 ， 换 段 使 用 <p> 标 记 。 


3.2.1 案例 4 一 一 换行 标记 <br> 


换行 标记 <br> 是 一 个 单 标记 ， 它 没有 结束 标记 ， 是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 
在 一 个 段 内 强制 换行 。 一 个 <br> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 使 
用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 例 如 ， 下 面 的 代码 ， 实 现 了 对 文本 的 
强制 换行 。 

【 例 3.4】 文 本 换行 (实例 文件 : ch03\3.4.html) 


<!1DOCTYPE html> 
<html> 

<head> 
<title> 文 本 段 换 行 </title> 
</head> 

<body> 

你 见 ， 或 者 不 见 我 <br/> 
我 就 在 那里 <br/> 

不 翡 不 喜 <br/> 

你 念 ， 或 者 不 念 我 <br/> 
情 就 在 那里 <br/> 

不 来 不 去 

</body> 

</html> 


虽然 在 HTML 源 代码 中 ， 主 体 部 分 的 内 容 在 排版 上 没有 换行 ， 但 是 增加 <br> 标 记 后 ， 在 
IE 9.0 中 的 预览 效果 如 图 3-9 所 示 ， 实 现 了 换行 效果 。 
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3-9 ”换行 标记 的 使 用 


3.2.2 ”案例 5 一 一 段落 标记 p 


段落 标记 是 双 标 记 ， 即 <p></p>， 在 <p>( 开 始 标记 ) 和 </p>( 结 束 标记 ) 之 间 的 内 容 形成 一 个 
段落 。 如 果 省 略 结束 标记 ， 从 <p> 标 记 开 始 ， 直 到 遇见 下 一 个 段落 标记 之 前 的 文本 ， 都 在 一 个 
段落 内 。 

【 例 3.5】 以 段落 显示 (实例 文件 ，ch03\3.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p>《 春 》 作者 : 朱自清 </p> 

<p> 盼 望 着 ， 盼 望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</p> 

<p> 

一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p> 

<p> 

小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 坐 着 ， 躺 
着 ， 打 两 个 深 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 提 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。 

</p> 


<p> 
桃 树 、 禁 树 、 梨 树 ， 你 不 让 我 ， 我 不 让 你 ， 都 开 满 了 花 赶 趟 儿 。 红 的 像 火 ， 粉 的 像 恒 ， 白 的 像 雪 。 花 里 带 
着 甜 味 儿 ， 闭 了 眼 ， 树 上 仿佛 已 经 满 是 桃 儿 、 杏 儿 、 梨 儿 。 花 下 成 千 成 百 的 蜜蜂 喻 喻 地 闹 着， 大 小 的 蝴蝶 
飞 来 飞 去 。 野 花 遍 地 是 ， 杂 样 儿 ， 有 名 字 的 ， 没 名 字 的 ， 散 在 花 从 里 ， 像 眼睛 ， 像 星星 ， 还 瞬 呀 用 的 .… 
</p> 

</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 3-10 所 示 ，<P> 标 记 将 文本 分 成 4 个 段落 。 








司 HiUsers\Administ PD » © X | BE Ea x nx 
文件 (” 妃 强 (E) 二 看 V) 收藏 交 从 ) 工具 (和 动 (H) 
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a 镜 赂 的 ， 绿 经 的 。 园 子 里 ， 田 轩 里 ， 瞧 去 ， 一 大 片 一 大 
的 项 熏 荐 ， 打 两 个 党 ， 跟 几 脚 球 ， 赛 几 焰 跑 ， 捉 几 回 壕 藏 。 风 经 悄悄 


栈 树 、 吉 树 > 和 你 不 让 我 ， 我 不 让 你 ， 都 开 满 了 花 主 档 儿 。 红 的 像 火 ， 关 的 像 
起 日 的 保守 ”花旦 项 看 放款)， 财 了 降 ， 树 上 仿 货 已 经 旋 是 楷 儿 、 示 儿 ， 弄 外。 

基 下 属 直 成 百 的 宣 星 吻 嘲 地 证 着 大 小 的 蝴蝶 飞 来 《去 。 野 花 饥 地 是 ， 杂 样 儿 ， 有 
名 字 的 ， 补 名 字 的 ， 散 在 花 从 里， 像 季 睛 ， 像 至 呈 ， 还 色 呀 用 的 …… 四 








图 3-10 段落 标记 的 使 用 
3.2.3 ”案例 6 一 一 标题 标记 h1~h6 
在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 各 种 级 别 
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的 标题 由 <hl> 一 <h6> 元 素来 定义 ，<hl> 一 <h6> 标 题 标记 中 的 字母 h 是 英文 headline( 标 题 行 ) 
的 简称 。 其 中 <h1> 代 表 1 级 标题 ， 级 别 最 高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 
别 最 低 。 

【 例 3.6】 标 题 标记 的 使 用 (实例 文件 : ch03\3.6.htmD 


<!DOCTYPE html> 

<html> 

<head> 
<title> 标 题 标记 的 使 用 </title> 
</head> 

<body> 

<h1> 卜 算 子 。 我 住 长 江 头 </h1> 
<h2> 我 住 长 江 头 ， 君 住 长 江 尾 。</h2> 
<h3> 日 日 思 君 不 见 君 ， 共 饮 长 江水 。</h3> 
<h4> 此 水 几时 休 ， 此 恨 何 时 已 。</h4> 
<h5> 只 愿 君 心 似 我 心 ， 定 不 负 相 思 意 。</h5> 
<h6> 作 者 : 宋代 李 之 仪 </h6> 

</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 3-11 所 示 。 














司 HAUsersAdminist DD ”CX | 眉 标 本 标的 征用 
文件 站 起 委 (F] 豆 看 V) 履 关 (A) 工具 Mm 大 对 (H) 


卜 算 子 我 住 长 江 头 
我 住 长 江 头 ， 君 住 长 江 尾 。 
日 日 思 帮 不 见 君 ， 共 侈 长江 水 。 


此 水 几时 休 ， 此 恨 采 时 已- 
只 原 君 心 似 我 心 ， 定 不 负 相思 意 * 























作者 , 末代 字 之 仅 
3-11 ”标题 标记 的 使 用 


@: 作为 标题 ，<h1>~<h6> 的 重要 性 是 有 区 别 的 ， 其 中 <h1> 标 题 的 重要 性 最 高 ， 
上 <h6> 的 最 低 。 


33 文字 列表 


文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 
来 ， 以 便 浏览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 类 似 于 文字 编辑 软件 Word 
中 的 项 目 符号 和 自动 编号 。 


3.3.1 案例 7 一 一 建立 无 序列 表 ul 


无 序列 表 相当 于 Word 中 的 项 目 符号 ， 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 
项 标识 。 无 序列 表 使 用 一 对 标记 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></i>， 其 结构 如 下 。 


<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
</ul> 


在 无 序列 表 结 构 中 ， 使 用 <ul></ul> 标 记 表 示 这 一 个 无 序列 表 的 开始 和 结束 ，<li> 则 表示 
一 个 列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结束 标记 。 下 
面 实例 使 用 无 序列 表 实现 文本 的 排列 显示 。 

【 例 3.7】 无 序列 表 ( 实 例文 件 ，ch03\3.7.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 幅 套 无 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<1i> 系 统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 内 容 设计 </1i> 
</ul> 
</1i> 
<1i> 网 页 草图 
<ul> 
<1i> 制 作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
</ LL 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> 
</ul> 
</body> 
</html> 


在 下 9.0 中 的 预览 效果 如 图 3-12 所 示 。 读 者 会 发 现 ， 无 序列 表 项 中 ， 可 以 嵌 套 一 个 列 
表 ， 如 代码 中 的 “系统 分 析 ” 列 表 项 和 “网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 此 在 这 对 
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<1i></i> 标 记 间 又 增加 了 一 对 <ul></ul> 标 记 。 
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“网 站 测试 
- 站 点 的 发 布 与 站 点 管理 
图 3-12 无 序列 表 


3.3.2 ”案例 8 一 一 建立 有 序列 表 ol 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 ， 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 
基本 相同 ， 使 用 标记 <ol></ol>， 每 一 个 列表 项 前 使 用 <li></li>。 每 个 项 目 都 有 前 后 顺序 之 分 ， 
多 数 用 数字 表示 ， 其 结构 如 下 。 


<ol> 
<1i> 第 1 项 </1i> 
<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
</ol> 


下 面 实例 使 用 有 序列 表 实 现 文本 的 排列 显示 。 
【 例 3.8】 有 序列 表 ( 实 例文 件 : ch03\3.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 有 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 本 节 内 容 列表 </h1> 
<ol> 
<1i> 认 识 网 页 </1i> 
<1i> 网 页 与 HTML 差异 </1i> 
<1i> 认 识 Web 标准 </1i> 
<1i> 网 页 设计 与 开发 的 流程 </1i> 
<1i> 与 设计 相关 的 技术 因素 </1i> 
</ol> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 3-13 所 示 。 读 者 可 以 看 到 新 添加 的 有 序列 表 。 
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本 节 内 容 列表 
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图 3-13 有 序列 表 
3.3.3 ”案例 9 一 一 建立 不 同类 型 的 无 序列 表 


通过 使 用 多 个 <ul> 标 签 ， 可 以 建立 不 同类 型 的 无 序列 表 。 
【 例 3.9】 不 同类 型 的 无 序列 表 ( 实 例文 件 : ch03\3.9.htmD) 


<!DOCTYPE html> 
<html> 

<body> 

<h4>Disc 项 目 符号 列表 : </h4> 
<ul type="disc"> 
<1i> 芋 果 </1i> 

<1i> 香 蔽 </1i> 

<1i> 柠 榜 </1i> 

<1i> 桔 子 </1i> 

</ul> 

<h4>Circle 项 目 符号 列表 : </h4> 
<ul type="circle"> 
<1i> 芋 果 </1i> 

<1i> 香 燕 </1i> 

<1i> 柠 榜 </1i> 

<1i> 桔 子 </1i> 

</ul> 

<h4>square 项 目 符号 列表 : </h4> 
<ul type="square"> 
<1i> 芋 果 </1i> 

<1i> 香 樵 </1i> 

<1i> 柠 檬 </1i> 

<1i> 桔 子 </1i> 

</ul> 

</body> 

</html> 


在 下 9.0 中 的 预览 效果 如 图 3-14 所 示 。 
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图 3-14 不 同类 型 的 无 序列 表 
N 3.3.4 ”案例 10 一 一 建立 不 同类 型 的 有 序列 表 


、 通过 使 用 多 个 <ol> 标 签 ， 可 以 建立 不 同类 型 的 有 序列 表 。 
【 例 3.10】 不 同类 型 的 有 序列 表 ( 实 例文 件 : ch03\3.10.html) 


<1DocTYPE html> 
<html> 

<body> 
<h4> 数 字 列 表 : </h4> 
<ol> 
<1i> 芋 果 </1i> 
<1i> 香 药 </1i> 
<1i> 柠 檬 </1i> 
<1i> 桔 子 </1i> 
</ol> 

<h4> 字 母 列表 : </h4> 
<ol type="A"> 
<1i> 芋 果 </1i> 
<1i> 香 蕉 </1i> 
<1i> 柠 榜 </1i> 
<1i> 桔 子 </1i> 
</ol> 

</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 3-15 所 示 。 
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图 3-15 不 同类 型 的 有 序列 表 


3.3.5 ”案例 11 一 一 建立 肉 套 列表 


嵌 套 列表 是 网 页 中 常用 的 元 素 ， 使 用 <ul> 标 签 可 以 制作 网 页 中 的 霸 套 列表 。 
【 例 3.11】 乱 套 列表 (实例 文件 :ch03\3.11.htmD) 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 一 个 嵌 套 列表 : </h4> 
<ul> 
<1i> 咖 啡 </1i> 
<1i> 茶 
<ul> 
<1i> 红 茶 </1i> 
<1i> 绿 茶 
<ul> 
<1i> 中 国 茶 </1i> 
<1i> 非 洲 茶 </1i> 
</ul> 
</l1> 
</ul> 
</1i> 
<1i> 牛 奶 </1i> 
</ul> 
</body> 
</html> 


在 下 9.0 中 的 预览 效果 如 图 3-16 所 示 。 
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~ 图 3-16 由 套 列表 
NA 


3.3.6 ”案例 12 一 一 自 定义 列表 


在 HTML 5 中 还 可 以 自 定义 列表 。 自 定义 列表 的 标签 是 <dl>。 
、 【 例 3.12】 自 定义 列表 (实例 文件 ，ch03\3.12.html) 


AN <!DOCTYPE html> 
<html> 
<body> 
<h2> 一 个 定义 列表 : </h2> 
<dl> 
<dt> 电 脑 </adt> 
<qd> 是 一 种 能 够 按照 程序 运行 的 电子 设备 .….</dd> 
<dt> 显 示 器 </dt> 
<qdd> 以 视觉 方式 显示 信息 的 装置 ... ... </dd> 
</dl> 
</body> 
</html> 


在 正 9.0 中 的 预览 效果 如 图 3-17 所 示 。 





| 文件 (P) 所 强 () 豆 看 (V) 收 戈 闪 (A) 工具 (T 帮 动 (H) 


一 个 定义 列表 : 





电脑 
__ .是 一 种 能 够 按照 程序 运行 的 电子 设备 ……. 


以 视觉 方式 显示 信息 的 装置 .…...…. 








3-17” 自 定义 列表 


3.4 网 页 中 的 图 像 


图 片 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 片 可 以 为 网 页 增色 不 少 。 网 页 支 
持 多 种 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 网 页 中 使 用 的 图 像 可 以 是 GIF、 
JPEG、BMP、TIFF、PNG 等 格式 的 图 像 文件 ， 其 中 使 用 最 广泛 主要 是 GIF 和 JPEG 两 种 


格式 。 


3.4.1 案例 13 一 一 在 网 页 中 插入 图 像 
图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标记 <img>。<img> 标 记 的 属性 及 描述 如 表 3-2 所 示 。 





属 性 值 
alt text 
SIC URL 
height pixels % 
ismap URL 
usemap URL 
vspace pixels 
width pixels % 

1. 插入 图 像 

src 属性 用 





表 3-2 <img> 标 记 的 属性 及 描述 


描 述 
定义 有 关 图 形 的 短 的 描述 
要 显示 的 图 像 的 URL 
定义 图 像 的 高 度 
把 图 像 定义 为 服务 器 端的 图 像 映射 
定义 作为 客户 端 图 像 映射 的 一 幅 图 像 。 可 参阅 <map> 和 <area> 标 记 ， 了 
解 其 工作 原理 
定义 图 像 项 部 和 底部 的 空白 。 可 使 用 CSS 代替 
设置 图 像 的 宽度 


<img src=" 图 片 路 径 "> 
【 例 3.13】 在 网 页 中 插入 图 片 (实例 文件 : ch03\3.13.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 插 入 图 片 </title> 
</head> 

<body> 

<img src="images/ 美 图 1.jpg"> 
</body> 

</html> 


在 下 9.0 中 的 预览 效果 如 图 3-18 所 示 。 


于 指定 图 片 源 文件 的 路 径 ， 是 <img> 标 记 必 不 可 少 的 属性 。 语 法 格式 如 下 。 


a 





葡 困 过 讨 装 否 壬 昼 习 9 JWNLH_ 才 8 让 


有 GZ 


APP 和 移动 网 站 开发 
一 一 一 案例 课堂 @ 一 




















eS Br ER 
SD SE A TE 























图 3-18 插入 图 像 


2. 从 不 同位 置 插入 图 像 


在 插入 图 片 时 ， 可 以 将 其 他 文件 夹 或 服务 器 的 图 片 显 示 到 网 页 中 。 
【 例 3.14】 从 不 同位 置 插入 图 像 (实例 文件 : ch03\3.14.html) 


<!1DOCTYPE html> 

<html> 

<body> 

<p> 

来 自 一 个 文件 夹 的 图 像 : 

<img src="images/ 美 图 2.jpg" /> 
</p> 


<p> 

来 自 baidu 的 图 像 : 

<img 

src="http://www.baidu.com/img/shouye b5486898c692066bd2cbaeda86d74448.gif" 
</p> 

</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 3-19 所 示 。 
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3-19 插入 图 像 


3.4.2 ”案例 14 一 一 设置 图 像 的 宽度 和 高 度 


在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 显示 大 小 ， 一 般 是 按 原始 尺寸 显示 ， 但 也 可 以 
任意 设置 显示 尺寸 。 设 置 图 像 尺寸 分 别 用 属性 width( 宽 度 ) 和 height( 高 度 )。 
【 例 3.15】 设 置 图 像 的 高 度 和 宽度 (实例 文件 : ch03\3.15.htmD) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 插 入 图 片 </title> 

</head> 

<body> 

<img src="images/ 美 图 1.jpg"> 

<img src="images/ 美 图 1.jpg" width="200"> 
<img src="images/ 美 图 1.jpg" width="200" height="300"> 
</body> 

</html> 


在 下 9.0 中 的 预览 效果 ， 如 图 3-20 所 示 。 由 图 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width( 宽 
度 ) 和 height( 高 度 ) 控 制 。 当 只 为 图 片 设置 一 个 尺寸 属性 时 ， 另 外 一 个 尺寸 就 以 图 片 原始 的 长 宽 
比例 来 显示 。 图 片 的 尺寸 单位 可 以 选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 
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3-20 设置 图 像 的 宽度 和 高 度 


全” 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 后 图 像 会 出 现 马赛 克 ， 变 得 模糊 。 


在 Windows 中 查看 图 片 的 尺寸 ， 只 需要 找到 图 像 文件 ， 把 鼠标 指针 移动 到 图 像 
并 上 ， 停 留 几 秒 后 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 数字 ， 代 
表 图 像 的 宽度 和 高 度 ， 如 256 x 256。 


3.4.3 ”案例 15 一 一 设置 图 像 的 提示 文字 


为 图 像 添 加 提示 文字 可 以 方便 搜索 引擎 的 检索 ， 除 此 之 外 ， 图 像 提示 文字 的 作用 还 有 以 
下 两 个 。 
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@ 当 浏 览 网 页 时 ， 如 果 图 像 下 载 完成 ， 将 鼠标 指针 放 在 该 图 像 上 ， 鼠 标 指针 旁边 会 出 
现 提 示 文 字 ， 为 图 像 添加 说 明 性 文字 。 

e@ ”如果 图 像 没有 成 功 下 载 ， 在 图 像 的 位 置 上 就 会 显示 提示 文字 。 

下 面 的 实例 将 为 图 片 添加 提示 文字 效果 。 

【 例 3.16】 图 片 提示 文字 (实例 文件 : ch03\3.16.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 文字 提示 </title> 

</head> 

<body> 

<img src="images/ 美 图 2.jpg" alt=" 美 丽 的 花 条 "> 
</body> 

</html> 


在 正 9.0 中 预 RR 将 鼠标 指针 放 在 图 片上 ， 即 可 看 到 提示 文字 。 
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图 3-21 图 片 文 字 提 示 


全 ” 在 火狐 浏览 器 中 不 支持 该 功能 。 


3.4.4 ”案例 16 一 一 将 图 片 设置 为 网 页 背景 


在 插入 图 片 时 ， 用 户 可 以 根据 需要 将 某 些 图 片 设置 为 网 页 的 背景 。GIF 和 JPG 格式 的 文 
件 均 可 用 作 HTML 背景 。 如 果 图 像 小 于 页 面 ， 则 图 像 会 进行 重复 。 
【 例 3.17】 图 片 背景 (实例 文件 : ch03\3.17.html) 


<!1DOCTYPE html> 

<html> 

<body background="images/background.jpg"> 
<h3> 图 像 背景 </h3> 

</body> 

</html> 




















在 正 9.0 中 的 预览 效果 如 图 3-22 所 示 。 
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3-22 ”图片 背景 


3.4.5 “案例 17 一 一 排列 图 像 


中 


、 


在 网 页 的 文字 当中 ， 如 果 插 入 图 片 ， 这 时 可 以 对 图 像 进行 排序 。 常 用 的 排序 方式 为 居 
底部 对 齐 、 顶 部 对 齐 。 
【 例 3.18】 排 列 图 像 ( 实 例文 件 ，ch03\3.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<h2> 未 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src ="images/logo.gif"> 在 文本 中 </p> 

<h2> 已 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src=" images/logo.gif " align="bottom"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="middle"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/1logo.gif " align="top"> 在 文本 中 </p> 
</body> 

</html> 


在 正 9.0 中 的 预览 效果 如 图 3-23 所 示 。 
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未 设置 对 齐 方式 的 图 像 : 


00 
asBai 人 国 片 ,， 
已 设 剖 对 齐 方式 的 图 像 : 


00 
as Bai 全 国 片 。.。 
图 像 Bai 谷 国 上 在 文本 中 
转 像 000 在 文本 中 
Bai 全 图片 


图 3-23 图片 对 齐 方式 
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他 ”bottom 对 齐 方式 是 默认 的 对 齐 方式 。 


3.5 ”综合 











本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 本 案例 将 创建 一 个 由 文本 和 图 片 构成 
的 房屋 装饰 效果 网 页 ， 如 图 3-24 所 示 。 


ee rr cx 

















清新 活力 家 居 与 人 文 向 约 信 然 家居 





图 3-24 ”房屋 装饰 效果 网 页 


具体 操作 步骤 如 下 。 
在 Dreamweaver CC 中 新 建 HTML 文档 ， 并 修改 成 HTML 5 标准 ， 代 码 如 下 。 


<!DOCTYPE html> 

<html > 

<head> 
<title> 房 屋 装饰 装修 效果 图 </title> 
</head> 

<body> 

</body> 

</html> 


在 body 部 分 增加 如 下 HTML 代码 并 保存 页 面 。 


<p> <img src="images/xiyatu.jpg" width="300" height="200"/> <img 
src="images/stadshem.jpg" width="300" height="200"/><br /> 
西雅图 原生 态 公寓 室内 设计 与 stadshem 小 户型 公寓 设计 ( 带 阁 楼 ) </p> 

<hr/> 

<p> <img src="images/qingxinhuoli.jpg" width="300" height="200"/> <img 
src="images/renwen.jpg" width="300" height="200"/><br /> 

清新 活力 家 居 与 人 文 简约 悠然 家 居 </p> 


<hr /> 


舍 4 


| 


@ <hr> 标 记 的 作用 是 定义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 ， 在 HIML 5 中 
站 咏 。 没有 任何 属性. 


另外 ， 快 速 插入 图 片 及 设置 相关 属性 ， 可 以 借助 Dreamweaver CS 的 插入 功能 ， 或 按 快捷 
键 Ctrl+Alt+I。 


3.6 ”综合 案例 2 一 一 在 线 购物 网 站 产品 展示 效果 


本 实例 创建 一 个 由 文本 和 图 片 构成 的 在 线 购物 网 站 产品 展示 效果 。 
廿 了 TT 打开 记事 本 文件 ， 在 其 中 输入 下 述 代码 。 


<!DOCTYPE html> 

<html > 

<head> 

<title> 在 线 购物 网 站 产品 展示 效果 </title> 

</head> 

<body> 

<p> <img src="images/01.jpg" width="400" height="300"/> <img 
src="images/02.jpg" width="400" height="300"/><img src="images/03.jpg" 
width="400" height="300"/><br /> 

康 绮 黑 丽 珍 气 洗 发 护 发 五 件 套 &snbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
&nbsp &nbsp &nbsp &nbsp 静 佳 Jplus 惹 衣 草 茶树 精油 祛 冲 消 印 专家 推荐 5 件 套 &nbsp gnbsp 
&nbsp &nbsp &nbsp JCare 葡萄 籽 咀 喝 片 800mg X90 片 三 盒 特惠 礼包 </p> 

<hr/> 

<p> <img src="images/04.jpg" width="400" height="300"/> <img 
src="images/05.jpg" width="400" height="300"/><img src="images/06.jpg" 
width="400" height="300"/><br /> 

雅诗兰黛 即时 修 护 礼盒 四 件 套 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
&nbsp &nbsp &nbsp &nbsp &nbsp JUST BB 弹力 保湿 蜗牛 系列 特惠 超 值 套 &nbsp &nbsp 
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 美丽 加 芬 蜗 
牛 新 生 特惠 超 值 礼包 </p> 

<hr /> 

</body> 

</html> 


国保 存 网 页 ， 在 正 9.0 中 的 预览 效果 如 图 3-25 所 示 。 
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3-25 ”网 页 效果 
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3.7 高 手 甜 点 


甜点 1: 换行 标记 和 段落 标记 的 区 别 是 什么 ? 

换行 标记 是 单 标记 ， 不 能 写 结束 标记 。 段 落 标记 是 双 标 记 ， 可 以 省 略 结束 标记 也 可 以 不 
省 略 。 默 认 情 况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间 距 是 不 同 的 ， 段 落 间距 比较 大 ， 行 间 
距 比较 小 。HTML 是 无 法 调整 段落 间距 和 行 间 距 的 ， 如 果 希 望 调整 它们 ， 就 必须 使 用 CSS。 
在 Dreamweaver CC 的 【设计 】 视 图 下 ， 按 Enter 键 可 以 快速 换 段 ， 按 ShifttEnter 快捷 键 可 以 
快速 换行 。 

甜点 2: 无 序列 表 <ul> 元 素 的 作用 是 什么 ? 


无 序列 表 元 素 主 要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 ， 无 序列 表 在 制作 导航 
菜单 时 使 用 较 广泛 。 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实 现 。 


甜点 3: 在 浏览 器 中 ， 图 片 无 法 显示 ， 应 注意 什么 问题 ? 


图 片 在 网 页 中 属于 嵌入 对 象 ， 并 不 是 保存 在 网 页 中 ， 网 页 只 是 保存 了 指向 图 片 的 路 径 。 
浏览 器 在 解释 HIML 文件 时 ， 会 按 指定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存在 图 片 ， 


就 无 法 了 





E 常 显示 。 为 了 保证 图 片 的 正常 显示 ， 制 作 网 页 时 需要 注意 以 下 几 点 。 

图 片 格式 一 定 是 网 页 支持 的 。 

图 片 的 路 径 一 定 要 正确 ， 并 且 图 片 文件 扩展 名 不 能 省 略 。 

HTML 文件 位 置 发 生 改变 时 ， 图 片 一 定 要 跟随 着 改变 ， 即 图 片 位 置 和 HTML 文件 位 
置 始终 保持 相对 一 致 。 


3.8” 跟 我 练 练 手 


练习 1: 制作 一 个 包含 特殊 文本 的 网 页 。 

练习 2: 制作 一 个 包含 各 种 类 型 标题 的 网 页 。 

练习 3: 制作 一 个 带 有 无 序列 表 和 有 序列 表 的 网 页 。 
练习 4: 制作 一 个 图 文 并 成 的 网 页 。 
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用 HTML5 建 








HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 ， 超 链接 是 一 个 网 站 的 灵魂 ，Web 
已 掌握 的 在 方 框 中 打 钧 ) 


上 的 网 页 是 互相 链接 的 ， 单 击 被 称 为 超 链 接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 
只 有 将 网 站 中 的 各 个 页 面 链接 在 一 起 ， 这 个 网 站 才能 称 之 为 真正 的 网 站 。 
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4.1 网 页 超 链接 的 概念 


所 谓 的 超 链接 ， 是 指 从 一 个 网 页 指向 一 个 目标 的 链接 关系 ， 这 个 目标 可 以 是 另 一 个 网 
页 ， 也 可 以 是 相同 网 页 上 的 不 同位 置 ， 还 可 以 是 一 个 图 片 ， 一 个 电子 邮件 地 址 ， 一 个 文件 ， 
甚至 是 一 个 应 用 程序 。 


4.1.1 什么 是 网 页 超 链 接 


超 链接 是 一 种 对 象 ， 它 以 特殊 编码 的 文本 或 图 形 的 形式 来 实现 链接 ， 如 果 单 击 该 链接 ， 
则 相当 于 指示 浏览 器 移 至 同一 网 页 内 的 某 个 位 置 ， 打 开 一 个 新 的 网 页 ， 或 打开 某 一 个 新 的 
WWW 网 站 中 的 网 页 。 

网 页 中 的 链接 按照 链接 路 径 的 不 同 ， 可 以 分 为 3 种 类 型 ， 分 别 是 内 部 链接 、 锚 点 链接 和 
外 部 链接 。 按 照 使 用 对 象 的 不 同 ， 网 页 中 的 链接 又 可 以 分 为 文本 超 链接 、 图 像 超 链接 、E-mail 
链接 、 多 媒体 文件 链接 和 空 链接 等 。 

在 网 页 中 ， 一 般 文 字 上 的 超 链 接 都 是 蓝 色 ， 文 字 下 面 有 一 条 下 划 线 。 当 移动 鼠标 指针 到 
该 超 链接 上 时 ， 鼠 标 指针 就 会 变 成 一 只 手 的 形状 ， 这 时 候 单 击 鼠 标 ， 就 可 以 直接 跳 到 与 这 个 
超 链 接 相 连接 的 网 页 或 WWW 网 站 上 。 如 果 用 户 已 经 浏览 过 某 个 超 链 接 ， 该 超 链接 的 文本 颜 
色 就 会 发 生 改 变 (默认 为 紫色 )。 只 有 图 像 的 超 链 接 访问 后 颜色 不 会 发 生变 化 。 


4.1.2” 超 链接 中 的 URL 


URL 为 Uniform Resource Locator 的 缩写 ， 通 常 翻译 为 “统一 资源 定位 器 ”， 也 就 是 人 们 
通常 说 的 “网 址 ”， 用 于 指定 Internet 上 的 资源 位 置 。 

网 络 中 的 计算 机 之 间 是 通过 IP 地 址 区 分 的 ， 如 果 和 希望 访问 网 络 中 某 台 计算 机 中 的 资源 ， 
首先 要 定位 这 台 计 算 机 。IP 地 址 是 由 32 位 的 二 进 制 数 即 32 个 0/1 代码 组 成 ， 数 字 本 身 没有 
意义 ， 不 容易 记忆 。 为 了 方便 记忆 ， 计 算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 使 用 一 
组 有 意义 的 字符 组 成 的 地 址 ， 代 蔡 人 P 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”“ 主 机 名 ”“ 文 件 夹 名 ”和 “文件 名 ”， 如 图 4-1 所 示 。 





http://www. webDesign. com/pages/computer. html 
I T T 


| 
协议 主机 名 文件 去 名 文件 名 





4-1 URL 组 成 


互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 有 对 应 的 协 
议 ， 通 常 通 过 浏览 器 浏览 网 页 的 协议 都 是 HITP 协议 ， 即 “ 超 文 本 传输 协议 ”， 因 此 通常 网 
页 的 地 址 都 以 http:/ 开 头 。 

www.WebDesign.com 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服务 器 ， 主 机 名 可 以 通过 IP 地 址 或 
者 域名 来 表示 。 


确定 主机 后 ， 还 需要 说 明文 件 存 在 于 这 台 服 务 器 的 哪个 文件 夹 中 ， 这 里 文件 夹 可 以 分 为 
多 个 层级 。 

确定 文件 夹 后， 就 要 定位 文件 ， 即 要 显示 哪个 文件 ， 网 页 文件 通常 是 以 .html 或 htm 为 扩 
展 名 。 


4.1.3” 超 链接 的 URL 类 型 


网 页 上 的 超 链接 一 般 分 为 以 下 3 种 ， 分 别 如 下 。 

ee 绝对 URL 超 链接 : URL 就 是 统一 资源 定位 符 ， 简 单 地 讲 就 是 网 络 上 的 一 个 站 点 、 
网 页 的 完整 路 径 。 

ee 相对 URL 超 链接 : 例如 ， 将 自己 网 页 上 的 某 一 段 文 字 或 某 标题 ， 链 接 到 同一 网 站 的 
其 他 网 页 上 。 

e ”书签 超 链接 : 同一 网 页 的 超 链接 ， 这 种 超 链 接 又 叫 作 书签 。 





4.2 建立 网 页 超 链接 


超 链接 就 是 当 鼠 标 单 击 一些 文 字 、 图 片 或 其 他 网 页 元 素 时 ， 浏 览 器 会 根据 其 指示 载 入 一 
个 新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 链接 除了 可 链接 文本 外 ， 也 可 链接 各 种 媒体 ， 如 声 
音 、 图 像 、 动 画 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超 链接 所 使 用 的 HTML 标记 为 <a></a>。 超 链接 最 重要 的 要 素 有 两 个 ， 即 设置 为 超 链 
接 的 网 页 元 素 和 超 链接 指向 的 目标 地 址 。 基 本 的 超 链接 的 结构 如 下 。 


<a href=URL> 网 页 元 素 </a> 


4.2.1 案例 1 一 一 创建 超 文本 链接 
文本 是 网 页 制作 中 使 用 最 频繁 也 是 最 主要 的 元 素 。 为 了 实现 跳 转 到 与 文本 相关 内 容 的 页 
面 ， 往 往 需 要 为 文本 添加 链接 。 
1. 什么 是 文本 链接 
浏览 网 页 时 ， 会 看 到 一 些 带 下 划 线 的 文字 ， 将 鼠标 指针 移 到 文字 上 时 ， 指 针 将 变 成 手 
形 ， 单 击 会 打开 一 个 网 页 ， 这 样 的 链接 就 是 文本 链接 ， 如 图 4-2 所 示 。 
2. 创建 链接 的 方法 
使 用 <a> 标 记 可 以 实现 网 页 超 链 接 ， 在 <a> 标 记 内 需要 定义 锚 来 指定 链接 目标 。 锚 (anchonD 
有 两 种 用 法 ， 介 绍 如 下 。 
@ ”通过 使 用 href 属性 ， 创 建 指向 另外 一 个 文档 的 链接 (或 超 链接 )。 使 用 href 属性 的 代 
码 格式 如 下 。 
<a href=" 链 接地 址 "> 鲁 瑟 链 艇 扩 区 大 </a> 
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图 4-2 存在 有 文本 链接 的 网 页 


®@ ”通过 使 用 name 或 id 属性 ， 创 建 一 个 文档 内 部 的 书签 (也 就 是 说 ， 可 以 创建 指向 文档 
片段 的 链接 )。 使 用 name 属性 的 代码 格式 如 下 。 
<a name="value"> 便 秆 链 藤 扩 区 大 </a> 
name 属性 用 于 指定 锚 (anchor) 的 名 称 ， 这 个 方法 可 以 创建 大 型 文档 内 的 书签 。 
使 用 id 属性 的 代码 格式 如 下 。 
<a id="value"> 语 瑟 链 藤 记 芝 于 </a> 





3. 创建 网 站 内 的 文本 链接 


创建 网 页 内 的 文本 链接 主要 使 用 href 属性 来 实现 。 例 如 ， 在 网 页 中 做 一 些 知名 网 站 的 友 
情 链 接 。 
【 例 4.1】 使 用 记事 本 创建 网 页 超 文 本 链接 (案例 文件 : ch04\4.1.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 文 本 链接 </title> 
</head> 

<body> 
友情 链接 
<a href="http://www.baidu.com"> 百 度 </a> 

<a href="http://www.sina.com.cn"> 新 浪 </a> 

<a href="http://www.163.com"> 网 易 </a></body> 








</html> 
使 用 正 打开 文件 ， 预 览 效果 如 图 4.3 所 示 ， 带 有 超 链接 的 文本 呈现 浅 紫 色 。 
Ss yy I RahH) 
友情 链接 一 一 一 一 百度 新浪 回电 











图 4-3 创建 的 文本 链接 网 页 效果 


= 


仿 ”链接 地 址 前 的 “http://” 不 可 省 略 ， 否 则 链接 会 出 现 错误 提示 .。 


4.2.2 ”案例 2 一 一 创建 图 片 链接 


在 网 页 中 浏览 内 容 时 ， 若 将 鼠标 指针 移 到 图 片上 ， 指 针 将 变 成 手 形 ， 单 击 会 打开 一 个 网 
页 ， 这 样 的 链接 就 是 图 片 链接 ， 如 图 4-4 所 示 。 
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图 4-4 存在 有 图 片 链接 的 网 页 


使 用 <a> 标 记 为 图 片 添加 链接 的 代码 格式 如 下 。 
<a href=" 链 接 目标 "><img src=" 图 片 "/></a> 


【 例 4.2】 使 用 记事 本 创建 网 页 图 片 链接 (案例 文件 ，ch04\4.2.html) 


<!IDOCTYPE html> 

<html> 

<head> 

<title> 图 片 链接 </title> 

</head> 

<body> 

音乐 无 限 

<a href="mp3.html"><img src="1.jpg"/></a> 
<br> 

<br> 

<br> 

运动 健身 

<a href="tiyu.html"><img src="2.jpg"/></a> 
</body> 

</html> 


使 用 正 打开 文件 ， 预 览 效 果 如 图 4-5 所 示 ， 和 鼠标 指针 放 在 图 片上 会 呈现 手指 状 ， 单 击 后 
可 跳 转 到 指定 网 页 。 
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图 4-5 创建 的 图 片 链接 网 页 效果 


Pr 文件 中 的 图 片 要 和 当前 网 页 文件 在 同一 目录 下 ， 链 接 的 网 页 没有 加 “http:/”， 
SS 默认 为 当前 网 页 所 在 目录 。 


4.2.3 ”案例 3 一 一 创建 下 载 链接 


超 链接 <a> 标 记 的 href 属性 是 指向 链接 的 目标 ， 目 标 可 以 是 各 种 类 型 的 文件 ， 如 图 片 文 
件 、 声 音 文件 、 视 频 文件 、Word 文档 等 。 如 果 是 浏览 器 能 够 识别 的 类 型 ， 会 直接 在 浏览 器 中 
显示 ; 如果 是 浏览 器 不 能 识别 的 类 型 ， 在 正 浏览 器 中 会 弹出 文件 下 载 对 话 框 ， 如 图 4-6 所 示 。 


您 要 对 2.doc 执行 什么 操作 ? 
大 小 10.5 KB 


美 型 : Microsof ft Word 97 - 2003 
来 自 : C\Users\yingda\Desktop\ 源 代码 \ch04\ 链 接 到 各 种 类型 文件 


打开 (0) 
构 不 会 自动 保存 该 文件 . 


消 保存 (S) 


祖 另 存 为 (A) 








图 4-6 IE 中 的 文件 下 载 对 话 框 
【 例 4.3】 创 建 下 载 链接 (案例 文件 ，ch04\4.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 各 种 类 型 文件 </title> 

</head> 

<body> 

<p><a href="2 .doc"> 链 接 word 文档 </a></P> 
</body> 

</html> 


在 正中 预览 网 页 效果 如 图 4-7 所 示 。 实 现 链接 到 HTML 文件 、 图 片 和 Word 文档 。 














全 锋 近 各 种 尖 弄 文件 x* 
文件 (站 ”各 纺 (日 可 看 MV) 收 训 夫 A) 工具 MT 帮助 (H) 








链接 word 文 档 


sr i 人 
py NG 











图 4-7 链接 Word 文 档 


4.2.4 ”案例 4 一 一 使 用 相对 URL 和 绝对 URL 


绝对 URL 一 般 指 访问 非 同一 台 服务 器 上 的 资源 ， 相 对 URL 是 指 访问 同一 台 服 务 器 上 相 
同文 件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相同 文件 夹 中 的 文件 ， 只 需要 写 文件 名 ;如 果 访 
问 不 同文 件 夹 中 的 资源 ，URL 以 服务 器 的 根 目录 为 起 点 ， 指 明文 档 的 相对 关系 ， 由 文件 夹 名 


和 文件 名 两 部 分 构成 。 
【 例 4.4】 使 用 绝对 URL 和 相对 URL 实现 超 链 接 (案例 文件 ，ch04\4.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绝 对 URL 和 相对 URL</title> 
</head> 
<body> 
单 击 <a href="http://www.webDesign.com/index.html"> 绝 对 URL</a> 链 接 到 
webDesign 网 站 首页 <br /> 
单 击 <a href="02.html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br /> 
单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 
</body> 
</html> 


在 上 述 代码 中 ， 第 1 个 链接 使 用 的 是 绝对 URL; 第 2 个 链接 用 的 是 服务 器 相对 URL， 也 
就 是 链接 到 文档 所 在 服务 器 根 目录 下 的 02.html; 第 3 个 链接 使 用 的 是 文档 相对 URL， 即 原文 
档 所 在 文件 夹 的 父 文件 夹 下 的 pages 文件 夹 中 的 03.html 文件 。 

在 正中 预览 网 页 效果 如 图 4-8 所 示 。 








一 站 CAUsersyingda\C PD - C X | BURLIANENURL x 
文件 (F) ”篇 锣 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
单 击 绝对 URL 链 接 到 webDesi 











站 首页 
单 击 相 同文 件 夫 的 URL 链 接 到 相同 文件 夹 中 的 第 ?个 页 面 
文件 去 的 URL 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 








图 4-8 ”绝对 URL 和 相同 URL 
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4.2.5 “案例 5 一 一 设置 以 新 窗口 显示 超 链接 页 面 


默认 情况 下 ， 当 单 击 超 链接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 ， 蔡 换 当 前 页 面 的 内 容 。 
如 果 要 在 单 击 某 个 链接 以 后 ， 打 开 一 个 新 的 浏览 器 窗口 ， 并 在 该 新 窗口 中 显示 目标 页 面 ， 就 
需要 使 用 <a> 标 记 的 target 属性 。 

target 属性 的 代码 格式 如 下 。 


<a target="value"> 


其 中 value 有 4 个 参数 可 用 ， 这 4 个 保留 的 目标 名 称 用 作 特 殊 的 文档 重 定 向 操作 。 

@ _blank: 浏览 器 总 在 一 个 新 打开 、 未 命名 的 窗口 中 载 入 目标 文档 。 

@ self: 这 个 目标 对 所 有 没有 指定 目标 的 <a> 标 记 来 说 是 默认 目标 ， 它 使 得 目标 文档 载 
入 并 显示 在 相同 的 框架 或 者 窗口 中 作为 源 文档 。 这 个 目标 是 多 余 且 不 必要 的 ， 除 非 
和 文档 标题 <base> 标 记 中 的 target 属性 一 起 使 用 。 

@  _parent: 这 个 目标 使 得 文档 载 入 父 窗口 或 者 载 入 包含 超 链 接 引 用 的 框架 的 框架 集 。 
如 果 这 个 引用 是 在 窗口 或 者 顶级 框架 中 ， 那 么 它 与 目标 _self 等 效 。 

@ top: 这 个 目标 使 得 文档 载 入 包含 这 个 超 链接 的 窗口 ， 用 _top 目标 将 会 清除 所 有 被 
包含 的 框架 并 将 文档 载 入 整个 浏览 器 窗口 。 

【 例 4.5】 设 置 以 新 窗口 显示 超 链接 页 面 (案例 文件 : ch04\4.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 链 接 目标 </title> 

</head> 

<body> 

<a href="http://www.baidu.com" target=" blank"> 百 度 </a> 
</body> 

</html> 


使 用 下 打开 网 页 文件 ， 显 示 效 果 如 图 4-9 所 示 。 
单 击 网 页 中 的 超 链 接 ， 在 新 窗口 打开 链接 页 面 ， 如 图 4-10 所 示 。 
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图 4-9 制作 网 页 超 链接 图 4-10 在 新 窗口 中 打开 链接 网 页 


如 果 将 _ blank 换 成 self， 即 代码 修改 为 “<a hre 全 "http://www.baidu.com" target="_self"'> 百 
度 </a>”， 单 击 超 链接 后 ， 直 接 在 当前 窗口 打开 新 链接 ， 如 图 4-11 所 示 。 
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图 4-11 在 当前 窗口 中 打开 链接 网 页 


Se target 的 4 个 值 都 以 下 划 线 开始 ， 其 他 用 一 个 下 划 线 作为 开头 的 窗口 或 者 目标 都 
会 被 浏览 器 忽略 ， 因 此 ， 不 要 将 下 划 线 作为 文档 中 定义 的 任何 框架 name 或 id 的 第 一 
个 字符 。 


4.2.6 ”案例 6 一 一 设置 电子 邮件 链接 


在 某 些 网 页 中 ， 当 访问 者 单 击 某 个 链接 以 后 ， 会 自动 打开 电子 邮件 客户 端 软件 ， 如 
Onutlook 或 Foxmail 等 ， 向 某 个 特定 的 E-mail 地 址 发 送 邮件 ， 这 个 链接 就 是 电子 邮件 链接 。 电 
子 邮 件 链接 的 格式 如 下 。 

<a href="mailto: 电 子 邮件 地 址 ”> 网 页 元 素 </a> 


【 例 4.6】 设 置 电子 邮件 链接 (案例 文件 : ch04\4.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 电 子 邮 件 链接 </title> 

</head> 

<body> 

<img src="images/logo.gif" width="119" height="49"> [免费 注册 ] [登录 ] 
<a href="mailto:kfdzsj@126.com"> 站 长 信箱 </a> 

</body> 

</html> 


在 下 中 预览 网 页 的 效果 如 图 4-12 所 示 ， 实 现 了 电子 邮件 链接 。 当 单 击 【 站 长 信息 】 链 
接 时 ， 会 自动 弹出 Outlook 窗口 ， 要 求 编写 电子 邮件 ， 如 图 4-13 所 示 。 
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图 4-12 ”链接 到 电子 邮件 图 4-13 ”Outlook 新 邮件 窗口 





4.3 ”案例 7 一 一 浮动 框架 iframe 


HTML 5 中 已 经 不 支持 frameset 框架 ， 但 是 仍然 支持 fame 浮动 框架 的 使 用 。 浮 动 框架 
可 以 自由 控制 窗口 大 小 ， 可 以 配合 表格 随意 地 在 网 页 中 的 任何 位 置 插入 窗口 。 实 际 上 就 是 在 
窗口 中 再 创建 一 个 窗口 。 

使 用 过 ame 创建 浮动 框架 的 格式 如 下 。 

<iframe src=" 链 接 对 象 ” > 


其 中 ，src 表示 浮动 框架 中 显示 对 象 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 例 
下 面 的 代码 是 在 浮动 框架 中 显示 百度 网 站 。 
【 例 4.7】 浮 动 框架 (案例 文件 :ch04\4.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 浮 动 框架 中 显示 百度 网 站 </title> 

</head> 

<body> 

<iframe src="http://www.baidu.com"></iframe> 
</body> 

</html> 


在 正 中 预览 网 页 效果 如 图 4-14 所 示 。 从 预览 结果 可 见 ， 浮 动 框架 在 页 面 中 又 创建 了 一 
个 窗口 ， 默 认 情 况 下 ， 浮 动 框架 的 宽度 和 高 度 为 220 像素 X120 像素 。 

如 果 需 要 调整 浮动 框架 尺寸 ， 可 使 用 CSS 样式 。 修 改 上 述 浮动 框架 尺寸 ， 可 在 head 标记 
部 分 增加 如 下 CSS 代码 。 


<style> 

iframe{ 
width:600px; // 宽 度 
height:800px; ”// 高 度 














占 


border:none; // 无 边框 
1 
</style> 























图 4-14 浮动 框架 效果 
在 正中 预览 网 页 的 效果 如 图 4-15 所 示 。 





图 4-15 修改 宽度 和 高 度 的 浮动 框架 


BN 


全” 在 HTMLS 中 ，iftame 浮 动 框架 仅 支持 src 属性 ， 再 无 其 他 属性 。 


让 


4.4 案例 8 一 一 精确 定位 热点 区 域 


在 浏览 网 页 时 ， 读 者 会 发 现 ， 当 单 击 一 张 图 片 的 不 同 区 域 ， 会 显示 不 同 的 链接 内 容 ， 这 
就 是 图 片 的 热点 区 域 。 所 谓 图 片 的 热点 区 域 ， 就 是 将 一 个 图 片 划分 成 若干 个 链接 区 域 ， 访 问 
者 单 击 不 同 的 区 域 ， 会 链接 到 不 同 的 目标 页 面 。 

在 HTML 中 ， 可 以 为 图 片 创建 3 种 类 型 的 热点 区 域 : 矩形 、 圆 形 和 多 边 形 。 创 建 热点 区 
域 使 用 <map> 和 <area> 标 记 ， 语 法 格式 如 下 。 








5 多 
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<img src=" 图 片 地 址 ”usemap="# 名 称 "> 
<map id="# 名 称 "> 
<area shape="rect" coords="10,10,100,100" href="#"> 
<area shape="circle" coords="120,120,50" href="#"> 
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#"> 

</map> 

在 上 面 的 语法 格式 中 ， 需 要 注意 以 下 几 点 。 

@ ”要 想 建立 图 片 热点 区 域 ， 必 须 先 插入 图 片 。 注 意 ， 图 片 必须 增加 usemap 属性 ， 说 明 
该 图 像 是 热 区 映射 图 像 ， 属 性 值 必 须 以 # 开 头 ， 加 上 名 字 ， 如 #pic。 那 么 上 面 的 第 1 
行 代码 可 以 修改 为 “<img src=" 图 片 地 址 " usemap="#pic">”。 

e ”<map> 标 记 只 有 一 个 属性 id， 其 作用 是 为 区 域 命 名 ， 其 设置 值 必须 与 <img> 标 记 的 
usemap 属性 值 相 同 。 修 改 上 述 代码 为 “<map id="#pic">”。 

e@ ”<area> 标 记 主 要 是 定义 热点 区 域 的 形状 及 超 链接 ， 其 有 3 个 必需 的 属性 。 
* ”shape 属性 ， 控 件 划 分 区 域 的 形状 ， 其 取 值 有 3 个 ， 分 别 是 rect( 和 矩形)、circle( 圆 

形 ) 和 poly( 多 边 形 )。 
8 coords 属性， 控制 区 域 的 划分 坐标 。 
- ”如 果 shape 属性 取 值 为 rect， 那 么 coords 的 设置 值 分 别 为 矩形 的 左上 角 x、 
y 坐标 点 和 右 下 角 x、y 坐标 点 ， 单 位 为 像素 。 
如 果 shape 属性 取 值 为 circle， 那 么 coords 的 设置 值 分 别 为 圆 形 圆心 x、y 
坐标 点 和 半径 值 ， 单 位 为 像素 。 
- ”如 果 shape 属性 取 值 为 poly， 那 么 coords 的 设置 值 分 别 为 矩形 在 各 个 点 
x、y 的 坐标 ， 单 位 为 像素 。 
4 href 属性 是 为 区 域 设置 超 链接 的 目标 ， 设 置 值 为 “#” 时 ， 表 示 为 空 链接 。 

上 面 讲述 了 HTML 创建 热点 区 域 的 方法 ， 但 是 最 让 人 头痛 的 地 方 就 是 坐标 点 的 定位 。 对 
于 简单 的 形状 还 容易 ， 如 果 形 状 较 多 且 形 状 复杂 ， 则 确定 坐标 点 这 项 工作 的 工程 量 就 很 大 ， 
因此 ， 不 建议 使 用 HTML 代码 去 完成 。 这 里 将 为 读者 介绍 一 个 快速 且 能 精确 定位 热点 区 域 的 
方法 ， 在 Dreamweaver CC 中 可 以 很 方便 地 实现 这 个 功能 。 

Dreamweaver CC 创建 图 片 热点 区 域 的 具体 操作 步骤 如 下 。 

创建 一 个 HTML 文档 ， 插 入 一 张 图 片 文件 ， 如 图 4-16 所 示 。 

EECDy 选择 图 片 ， 在 Dreamweaver CC 中 打开 【属性 】 面 板 ， 面 板 左 下 角 有 3 个 蓝 色 图 
标 按 钮 ， 依 次 代表 矩形 、 圆 形 和 多 边 形 热点 区 域 。 单 击 左边 的 【和 矩形 】 工 具 图 标 ， 
如 图 4-17 所 示 。 

ECOS 将 鼠标 指针 移动 到 被 选中 图 片上 ， 以 【创意 信息 平台 】〗】 栏 中 的 矩形 大 小 为 准 ， 
按 下 鼠标 左 键 ， 从 左上 方向 右 下 方 拖 忠 鼠 标 ， 得 到 和 矩形 区 域 ， 如 图 4-18 所 示 。 




















图 4-16 插入 图 片 
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图 4-17 Dreamweaver CC 中 图 像 的 【属性 】 面 板 
EYY 绘制 出 来 的 热点 区 域 呈 现 出 半 透 明 状 态 ， 效 果 如 图 4-19 所 示 。 
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图 4-18 绘制 矩形 热点 区 域 图 4-19 完成 矩形 热点 区 域 的 绘制 


ECDp 如 果 绘 制 出 来 的 矩形 热点 区 域 有 误差 ， 可 以 
通过 【属性 】 面 板 中 的 【指针 热点 】 工 具 进 行 编 oe 
辑 ， 如 图 4-20 所 示 。 到 Mo 一 
ECDDp 完成 上 述 操作 之 后 ， 保 持 和 矩形 热点 区 域 被 选 
中 状态 ， 然 后 在 【属性 】 面 板 的 【链接 】 文 本 框 











中 输入 该 热点 区 域 链接 对 应 的 跳 转 目 标 页 面 。 图 4-20 【指针 热点 】 工 具 
EC 在 【目标 】 下 拉 列 表 框 中 有 4 个 选项 ， 它 们 
决定 着 链接 页 面 的 弹出 方式 ， 这 里 如 果 选 择 了 _blank 选项 ， 那 么 矩形 热点 区 域 的 链 
接 页 面 将 在 新 的 窗口 中 弹出 。 如 果 【 目标 】 选 项 保持 空白 ， 就 表示 仍 在 原来 的 浏览 
器 窗口 中 显示 链接 的 目标 页 面 。 这 样 ， 和 矩形 热点 区 域 就 设置 好 了 。 
EC) 接 下 来 继续 为 其 他 菜单 项 创建 矩形 热 区 域 。 操 作 方法 参阅 上 面 的 步骤 ， 完 成 后 
的 效果 ， 如 图 4-21 所 示 。 


py HH 








图 4-21 为 其 他 菜单 项 创建 矩形 热点 区 域 


EEJD) 完成 后 保存 并 预览 页 面 ， 可 以 发 现 ， 凡 是 绘制 了 热点 的 区 域 ， 鼠 标 指针 移 上 去 
时 就 会 变 成 手 形 ， 单 击 后 会 跳 转 到 相应 的 页 面 。 

EE 至 此 为 止 ， 网 站 的 导航 ， 就 使 用 热点 区 域 制作 完成 了 。 查 看 此 时 页 面相 应 的 
HTML 源 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 热 点 区 域 </title> 

</head> 

<body> 

<img src="images/04.jpg" width="1001" height="87" border="0" usemap="#Map"> 
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<map name="Map"> 
<area shape="rect" coords="298,5,414,85" href="#"> 
<area shape="rect" coords="412,4,524,85" href="#"> 
<area shape="rect" coords="525,4,636,88" href="#"> 
<area shape="rect" coords="639,6,749,86" href="#"> 
<area shape="rect" coords="749,5,864,88" href="#"> 
<area shape="rect" coords="861,6,976,86" href="#"> 

</map> 

</body> 

</html> 


可 以 看 到 ，Dreamweaver CC 自动 生成 的 HTML 代码 结构 和 前 面 介绍 的 是 一 样 的 ， 但 是 


所 有 的 坐标 都 自动 计算 出 来 了 ， 这 正 是 网 页 制作 工具 的 快捷 之 处 。 使 用 这 些 工 具 本 质 上 和 手 
工 编写 HTML 代码 没有 区 别 ， 但 是 可 以 提高 工作 效率 。 

@: 本 书 所 讲述 的 手工 编写 HTML 代码 ， 在 Dreamweaver CC 工具 中 几乎 都 有 对 应 的 
操作 ， 请 读者 自行 研究 ， 以 提高 编写 HTML 代码 效率 。 但 是 ， 请 读者 注意 ， 使 用 网 
” ”页 制作 工具 前 ， 一 定 要 明白 这 些 HTML 标记 的 作用 。 因 为 一 个 专业 的 网 页 设计 师 必 

须 具 备 HTML 方面 的 知识 ， 否 则 再 强大 的 工具 也 只 是 能 是 无 根 之 树 ， 无 源 之 泉 。 


参照 矩形 热点 区 域 的 操作 方法 ， 为 图 4-22 创建 圆 形 和 多 边 形 热点 区 域 。 




















4-22 ” 圆 形 和 多 边 形 热点 区 域 
查看 此 时 页 面相 应 的 HTML 源 代码 如 下 。 


<1DOCTYPE html> 

<html> 

<head> 

<title> 创 建 圆 形 和 多 边 形 热点 区 域 </title> 

</head> 

<body> 

<img src="images/china.jpg" width="618" height="499" border="0" 

usemap="#Map"> 

<map name="Map"> 
<area shape="circle" coords="22]1,26]1,40" href="#"> 
<area shape="poly" 


coords="411,251,394,267,375,280,395,295,407,299,431, 307, 436, 303, 429,284,431, 
271,426,255" href="#"> 
<area shape="poly" 
coords="385,336, 371, 346, 370, 375, 376, 385, 394, 395, 403, 403, 410, 397, 419, 393, 426, 
385,425,359,418, 343,399, 337" href="#"> 
</map> 
</body> 
</html> 


4.5 ”综合 案例 一 一 使 用 锚 链 接 制作 电子 书 阅 读 网 页 


超 链接 除了 可 以 链接 到 特定 的 文件 和 网 站 之 外 ， 还 可 以 链接 到 网 页 内 的 特定 内 容 。 这 可 
以 使 用 <a> 标 记 的 name 或 id 属性 ， 创 建 一 个 文档 内 部 的 书签 ， 也 就 是 说 ， 可 以 创建 指向 文档 
片段 的 链接 。 

例如 ， 使 用 以 下 命令 可 以 将 网 页 中 的 文本 “你 好 ”定义 为 一 个 内 部 书签 ， 书 签名 称 为 


namel。 
<a name="namel"” > 你 好 </a> 


在 网 页 中 的 其 他 位 置 可 以 插入 超 链接 引用 该 书签 ， 引 用 命令 如 下 。 
<a href="#namel” > 引用 内 部 书签 </a> 


一 般 网 页 内 容 比 较 多 的 网 站 会 采用 这 种 方法 ， 如 一 个 电子 书 网 页 。 
下 面 就 使 用 锚 链 接 制 作 一 个 电子 书 网 页 。 
EEIDp 打开 记事 本 ， 输 入 以 下 代码 ， 并 保存 为 电子 书 .html 文件 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 电 子 书 </title> 
</head> 
<body > 
<h1> 文 学 鉴赏 </h1> 
<ul> 
<1i><a href="# 第 一 篇 ” > 再 别 康桥 </a> 
<1i><a href="# 第 二 篇 " > 雨 埠 </a> 
<1i><a href="# 第 三 篇 " > 荷塘 月 色 </a> 
</ul> 
<h3><a name=" 第 一 篇 ”> 再 别 康桥 </a></h3> 
<h3><a name=" 第 二 篇 " > 雨 埠 </a></h3> 
<h3><a name=" 第 三 篇 "” > 荷塘 月 色 </a></h3> 
</body> 
</html> 


使 用 正 打开 文件 ， 显 示 效果 如 图 4-23 所 示 。 
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文件 (有) 。 编 句 (E) ”查看 (V)】 疏 草 实 (A) 工具 (T) 帮助 (H) 





文学 鉴赏 








图 4-23 电子 书 网 页 
国 了 BY 为 每 一 个 文学 作品 添加 内 容 ， 完 善后 的 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 电 子 书 </title> 

</head> 

<body > 

<h1> 文 学 鉴赏 </h1> 

<ul> 

| <1i><a href="# 第 一 篇 ” > 再 别 康桥 </a> 
<li><a href="# 第 二 篇 " > 雨 埠 </a> 
<1i><a href="# 第 三 篇 " > 荷塘 月 色 </a> 

</ul> 

<h3><a name=" 第 一 篇 "” > 再 别 康桥 </a></h3> 

徐 志摩 








<ul> 
<1i> 轻 轻 的 我 走 了 ， 正 如 我 轻 轻 的 来 ; 
<1i> 我 轻 轻 的 招手 ， 作 别 西天 的 云彩 。 
<br> 
<1i> 屠 河畔 的 金 柳 ， 是 夕阳 中 的 新 娘 ; 
<1i> 波 光 里 的 艳 影 ， 在 我 的 心头 荡 澜 。 
<br> 
<1i> 软 泥 上 的 青 荐 ， 油 油 的 在 水 底 招 扬 ; 
<1i> 在 康 河 的 柔 波 里 ， 我 甘心 做 一 条 水 草 ! 
<br> 
<1i> 那 榆 荫 下 的 一 潭 ， 不 是 清泉 ， 是 天 上 虹 ; 
<1i> 揉 碎 在 浮 藻 间 ， 沉 淀 着 彩虹 似 的 梦 。 
<br> 
<1i> 寻 梦 ? 撑 一 支 长 篇 ， 向 青草 更 青 处 漫 溯 ; 
<1i> 满 载 一 船 星 辉 ， 在 星 辉 斑 澜 里 放歌 。 
<br> 
<1i> 但 我 不 能 放歌 ， 悄 悄 是 别离 的 笔 第 ; 
<1i> 夏 虫 也 为 我 沉默 ， 沉 默 是 今 晚 的 康桥 ! 
<br> 
<1i> 悄 悄 的 我 走 了 ， 正 如 我 悄悄 的 来 ; 
<1i> 我 挥 一 挥 衣 袖 ， 不 带 走 一 片 云彩 。 
</ul> 
<h3><a name=" 第 二 篇 " > 雨 埠 </a></h3> 
一 一 戴 望 舒 <br> 





撑 着 油纸 例 ， 独 自 入 得 在 您 长、 悠长 又 寂寥 的 雨 蔡 ， 我 希望 着 着 一 个 丁香 一 样 的 结 着 悉 怨 的 姑娘 。 
<br> 

她 是 有 丁香 一 样 的 颜色 ， 丁 香 一 样 的 芬芳 ， 丁 香 一 样 的 忧愁 ， 在 雨中 误 怨 ， 训 怨 又 仿 符 ;她 仿 香 在 这 究 
窒 的 雨 埠 ， 撑 着 油纸 伴 像 我 一 样 ， 像 我 一 样 地 默默 行 着 ， 冷 漠 ， 凄 清 ， 又 翌 账 。<br> 

她 静默 地 走 近 ， 走 近 ， 又 投 出 太 息 一 般 的 眼光 ， 她 飘 过 像 梦 一 般 地 姜 婉 迷茫 。 像 梦 中 飘 过 一 枝 丁 香 的 ， 
我 身 旁 飘 过 这 女郎 ， 她 静默 地 远 了 ， 远 了 ， 到 了 矣 二 的 篇 墙 ， 走 尽 这 雨 蔡 。 在 雨 的 哀 曲 里 ， 消 了 她 的 颜 
色 ， 散 了 她 的 芬芳 ， 消 散 了 ， 甚 至 她 的 太 息 般 的 眼光 丁香 般 的 翌 帐 。 撑 着 油纸 伞 ， 独 自 仿 得 在 悠长 ， 悠 
长 又 寂 窒 的 雨 埠 ， 我 希望 际 过 一 个 丁香 一 样 的 结 着 愁 怨 的 姑娘 。 

<h3><a name=" 第 三 篇 " > 荷塘 月 色 </a></h3> 

曲 曲折 折 的 荷塘 上 面 ， 弥 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 像 享 亭 的 舞女 的 裙 。 层 层 的 叶子 中 间 ， 零 
星 地 点 组 着 些 白花 ， 有 描 娜 地 开 着 的 ， 有 羞涩 地 打 着 采 儿 的 ;正如 一 粒 粒 的 明珠 ， 又 如 恬 天 里 的 星星 ， 
又 如 刚 出 浴 的 美人 。 微 风 过 处 ， 送 来 缕缕 清香 ， 仿 佛 远 处 高 楼 上 渺茫 的 歌声 似 的 。 这 时 候 叶 子 与 花 也 有 
一 丝 的 颤动 ， 像 闪电 般 ， 去 时 传 过 荷塘 的 那 边 去 了 。 叶 子 本 是 肩 并 肩 密 密 地 挨 着 ， 这 便 宛 然 有 了 一 道 凝 
政 的 波 痕 。 叶 子 底下 是 脉 脉 的 流水 ， 遮 住 了 ， 不 能 见 一 些 颜 色 ; 而 叶子 却 更 见 风 致 了 。<br> 

月 光 如 流水 一 般 ， 静 静 地 泻 在 这 一 片 叶子 和 花 上 。 薄 薄 的 青 雾 浮 起 在 荷塘 里 。 叶 子 和 花 仿佛 在 牛乳 中 洗 
过 一 样 ， 又 像 乱 着 轻 纱 的 梦 。 虽 然 是 满月 ， 天 上 却 有 一 层 淡淡 的 云 ， 所 以 不 能 朗 照 ;! 但 我 以 为 这 恰 是 到 
了 好 小 睡 也 别有风味 的 。 月 光 是 隔 了 树 照 过 来 的 ， 高 处 从 生 的 灌木 ， 落 下 参差 的 
斑 驭 的 黑 影 ， 峭 楞 楞 如 鬼 一 般 ; 弯 弯 的 杨柳 的 稀 朴 的 倩影 ， 却 又 像 是 画 在 荷 叶 上 。 塘 中 的 月 色 并 不 均 
匀 ; 但 光与影 有 着 和 谐 的 旋律 ， 如 楚 娴 玲 上 奏 着 的 名 曲 。 

</body> 

</html> 


保存 文件 ， 使 用 正 打开 文件 的 效果 如 图 4-24 所 示 。 
EEIDp 单 击 【两 埠 】 超 链接 ， 页 面 会 自动 跳 转 到 “ 雨 埠 ” 对 应 的 内 容 ， 如 图 4-25 所 示 。 
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再 别 康桥 

一 一 一 一 怕 志 麻 
， 轻 轻 的 的 二 了 ， 正 如 我 径 径 的 ， 
”我 轻 径 的 招手 ， 作 别 西天 的 到 这 
有 是 字 阳 中 的 新 巡 

波光 里 的 搓 影 在 我 的 心 闫 学 
7 软 上 的 青 生 ， 党 油 的 在 水 度 招 拓 ， v 
里 ， 我 甘心 做 一 条 水 草 | 


EN 








EI 
文人 朋 。 钴 各 日 。 豆 看 M。 收 训 关 和 工具 m 帮助 (| 
雨 起 


es 疙 自信 人 在 信 长 、 修长 又 委 寥 的 击 茧 ， 我 希望 次 着 一 个 
丁香 一 柠 的 结 着 悉 恕 的 姑娘 

她 时 有 下 雪 一 样 的 颜色 ， 工 香 一 样 的 共 苍 ， 丁 香 -一样 的 居 秘 ， 在 二 中 
RE Ss 闻 簿 入 在 这 寂寥 的 古 若 ， 控 着 油纸 全 像 我 一 样 ， 像 我 


伶 谍 ， 潮 

她 区 冉 地 主 近 ， 主 近 ， 义 投 出 本 目 一 角 的 眼光 ， 好 菇 过 像 区 一 般 地 靖 
婉 迷 茫 。 像 苍 中 味 过 一 枝 丁香 的 ， 息 身 旁 味 过 这 女 即 ， 好 静默 地 近 了 ， 过 
管 培 ， 古谷。 在 雨 的 京 曲 好 的 


走 尽 这 雨 孝 。 ， 
的 芬芳 ， 消 责 了 ， 甚 至 她 的 太 息 妆 的 眼光 丁香 航 的 习作， 摊 着 注 纸 企 ， 
ee 悠长 又 起 容 的 十 车 ， 我 闪 望 壬 这 一 个 香 一 样 的 结 着 息 、 
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图 4-24 ”添加 网 页 内 容 图 4-25 网 页 效果 


4.6 高 手 甜 点 


甜点 1: 在 创建 超 链 接 时 ， 使 用 绝对 URL 还 是 相对 URL? 
在 创建 超 链接 时 ， 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 ， 需 要 使 用 完整 的 绝对 URL; 


如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 当前 文档 或 站 点 根 文件 夹 的 相对 URL。 
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甜点 2: 链接 增多 后 ， 网 站 如 何 设 置 目录 结构 以 方便 维护 ? 





当 一 个 网 站 的 网 页 数量 增加 到 一 定 程度 以 后 ， 网 站 的 管理 与 维护 将 变 得 非常 烦琐 ， 因 此 





掌握 一 些 网 站 管理 与 维护 的 技术 是 非常 实用 的 ， 可 以 节省 很 多 时 间 。 建 立 适 合 的 网 站 文件 存 
储 结构 ， 可 以 方便 网 站 的 管理 与 维护 。 通 常 使 用 的 网 站 文件 组 织 结构 方案 及 文件 管理 遵循 的 


3 个 原则 如 下 。 





@ ”按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 存储 在 不 同 的 文件 夹 中 ， 这 种 存 


储 方法 适合 于 中 小 型 网 站 ， 是 通过 文 


件 的 类 型 对 文件 进行 管理 。 


@ ”按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按照 不 同 的 主题 进行 分 类 储存 。 同 一 主题 的 
所 有 文件 存放 在 一 个 文件 夹 中 ， 然 后 再 进一步 细 分 文件 的 类 型 。 这 种 方案 适用 于 页 


面 与 文件 数量 众多 、 信 息 量 大 的 静态 
®@ ”对 文件 类 型 进行 进一步 细 分 存储 管 班 


网 站 。 





EE。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 


进一步 细 分 后 进行 分 类 存储 管理 。 这 种 方案 适用 于 文件 类 型 复杂 、 包 含 各 种 文件 的 


多 媒体 动态 网 站 。 


4.7 跟 


练习 1: 建立 网 页 各 类 超级 链接 。 
练习 2: 创建 网 页 浮动 框架 。 
练习 3: 精确 定位 热点 区 域 。 


我 练 练 手 


练习 4: 使 用 锚 链 接 制作 电子 书 阅 读 网 页 。 
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据 ， 
输入 类 型 ， 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 


作 表 格 的 原理 是 使 用 相关 标记 ， 
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5.1 表格 的 基本 结构 


使 用 表格 显示 数据 ， 可 以 更 直观 和 清晰 。 在 HTML 文档 中 ， 表 格 主要 用 于 显示 数据 ， 虽 
然 可 以 使 用 表格 布局 ， 但 是 不 建议 使 用 ， 因 为 有 很 多 疾 端 。 表 格 一 般 由 行 、 列 和 单元 格 组 
成 ， 如 图 5-1 所 示 。 






































列 
| 
单元 格 
行 
特点 : 通 昭 情况 下 ,， 
一 致 、 
列 的 宽度 一 至 
图 5-1 表格 的 组 成 

在 HTML 5 中 用 于 表格 的 标记 如 下 。 


@ ”<table> 标 记 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 标 识 一 个 表格 对 象 的 结束 。 
一 个 表格 中 ， 只 人 允许 出 现 一 对 <table> 标 记 。 在 HIML 5 中 不 再 支持 它 的 任何 属性 。 
e@ ”<tr> 标 记 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 多 
少 对 <tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 在 HTML 5 中 不 再 支持 它 的 任何 属性 。 
@ ”<td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单元 格 开 始 ，</td> 标 记 用 于 标识 表格 某 行 中 的 
一 个 单元 格 结束 。<td></td> 标 记 书写 在 <tr></tr> 标 记 内 ， 一 对 <tr></tr> 标 记 内 有 多 少 
对 <td></td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 在 HTML 5 中 仅 有 colspan 和 
rowspan 两 个 属性 。 
最 基本 的 表格 ， 必 须 包含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></t> 标 记 以 及 一 对 或 
几 对 <td></td> 标 记 。 一 对 <table></table> 标 记 定义 一 个 表格 ， 一 对 <tr></tr> 标 记 定 义 一 行 ， 一 
对 <td></td> 标 记 定 义 一 个 单元 格 。 
例如 ， 定 义 一 个 4 行 3 列 的 表格 。 
【 例 5.1】 定 义 表格 (实例 文件 ，ch05\5.1.html) 


<1DOCTYPE html> 

<html> 

<head> 

<title> 表 格 基本 结构 </title> 

</head> 

<body> 

<table border="1"> 

<tr> 

<td>Al</td> 
<td>B1</td> 


<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正中 预览 网 页 的 效果 如 图 5-2 所 示 。 
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图 5-2 表格 基本 结构 


en 从 预览 图 中 读者 会 发 现 ， 表 格 没有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 上 述 知 识 讲述 
半 ”时 提 到 ，HTML 5 中 除了 <td> 标 记 提供 两 个 单元 格 合并 属性 之 外 ，<table> 和 <tr> 标 记 
也 没有 任何 属性 。 


5.2 ”使 用 HTML 5 创建 表格 


在 了 解 了 表格 的 基本 结构 后 ， 下 面 来 介绍 表格 的 基本 操作 ， 主 要 包括 创建 表格 、 设 置 表 
格 的 边框 类 型 、 设 置 表格 的 表 头 、 合 并 单元 格 等 操作 。 通 过 本 章节 的 学 习 ， 读 者 可 以 轻松 地 
设计 表格 。 


5.2.1 案例 1 一 一 创建 普通 表格 
表格 可 以 分 为 普通 表格 以 及 带 有 标题 的 表格 ， 在 HTML 5 中 ， 可 以 创建 这 两 种 表格 。 例 


os®@ 
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如 ， 创 建 1 列 、1 行 3 列 和 2 行 3 列 3 个 表格 。 
【 例 5.2】 创 建 表格 (实例 文件 ，ch05\5.2.html) 


<!IDOCTYPE html> 
<html> 
<body> 
<h4> 一 列 : </h4> 
<table border="1"> 
EE 
<td>100</td> 
</tr> 
</table> 
<h4> 一 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 
<h4> 两 行 三 列 : </h4> 
AN <table border="1"> 
、\ <tr> 
SS <td>100</td> 
N <td>200</td> 
<td>300</td> 
</Er> 
i 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-3 所 示 。 
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5-3 ”程序 运行 结果 


芭 洲 过 未 洲 泪 旦 S JNLH 润 地 S a 鱼 
py HB 


5.2.2 ”案例 2 一 一 创建 一 个 带 有 标题 的 表格 


有 时 ， 为 了 方便 表述 表格 ， 还 需要 在 表格 的 上 面 加 上 标题 。 例 如 ， 创 建 一 个 带 有 标题 的 


表格 。 
【 例 5.3】 带 有 标题 的 表格 (实例 文件 ，ch05\5.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<h4> 带 有 标题 的 表格 </h4> 

<table border="3"> 

<caption> 数 据 统计 表 </caption> 

人 
<td>100</td> 
<td>200</td> 
<td>300</td> 

</tr> 

<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 

</tr> 

</table> 

</body> 

</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-4 所 示 。 
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5-4 “程序 运行 结果 


5.2.3 ”案例 3 一 一 定义 表格 的 边框 类 型 


使 用 表格 的 border 属性 可 以 定义 表格 的 边框 类 型 ， 如 常见 的 加 粗 边 框 的 表格 。 下 面 创建 


不 同 边 框 类 型 的 表格 。 
【 例 5.4】 不 同 边框 类 型 的 表格 (实例 文件 ，ch05\5.4.htmD) 


<1DOCTYPE html> 
<html> 
<body> 
<h4> 普 通 边框 </h4> 
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<table border="1"> 

<Er> 
<td>First</td> 
<td>Row</td> 

人 

ES 
<td>Second</td> 
<td>Row</td> 

</Er> 

</table> 

<h4> 加 粗 边框 </h4> 

<table border="5"> 

EE 
<td>First</td> 
<td>Row</td> 

</tr> 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-5 所 示 。 


司 Hsuserswdminit P > OX | BG HAucersAdminl 














文 #(。 六 锅 EE) 豆 要 NV) 履 训 夫 内 。 工 具 (站 区 H) 


























图 5-5 程序 运行 结果 


5.2.4 ”案例 4 一 一 定义 表格 的 表 头 


表格 当中 也 存在 有 表 头 ， 可 以 使 用 <th> 和 </th> 标 识 定 义 ， 常 见 的 表 头 分 为 垂直 与 水 平 两 
种 。 下 面 分 别 创建 带 有 垂直 和 水 平 表 头 的 表格 。 
【 例 5.5】 定 义 表 格 的 表 头 (实例 文件 :ch05\5.5.html) 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 水 平 的 表 头 </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<th> 性 别 </th> 

















:当年 
这 地 


<th> 电 话 </th> 
Er: 
< 人 E> 
<td> 张 三 </td> 
<td> 男 </td> 
<td>123456</td> 
</tr> 
</table> 
<h4> 垂 直 的 表 头 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<td> 小 丽 </td> 
</tr> 
<tr> 
<th> 性 别 </th> 
<td> 女 </td> 
</tr> 
<tr> 
<th> 电 话 </th> 
<td>123456</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-6 所 示 。 
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图 5-6 程序 运行 结果 
5.2.5 ”案例 5 一 一 设置 表格 背景 


当 创 建 好 表格 后 ， 为 了 美观 ， 还 可 以 设置 表格 的 背景 。 
1. 定义 表格 背景 颜色 
为 表格 添加 背景 颜色 是 美化 表格 的 一 种 方式 ， 可 以 使 用 表格 的 bgcolor 属性 设置 。 下 面 为 


表格 添加 背景 颜色 。 
【 例 $.6】 定 义 表格 背景 颜色 (实例 文件 : ch05\5.7.html) 


<1DOCTYPE html> 
<html> 





oo@ 
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<body> 

<h4> 背 景 颜色 : </h4> 

<table border="1" 

bgcolor="green"> 

EE 
<td>100</td> 
<td>200</td> 

</tr> 

ES 
<td>300</td> 
<td>400</td> 

</tr> 

</table> 

</body> 

</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-7 所 示 。 
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图 5-7 ”程序 运行 结果 
2. 定义 表格 背景 图 片 


除了 可 以 为 表格 添加 背景 颜色 外 ， 还 可 以 将 图 片 设置 为 表格 的 背景 ， 使 用 表格 的 
background 属性 即 可 。 下 面 为 表格 添加 背景 图 片 。 
【 例 $.7】 定 义 表格 背景 图 片 (实例 文件 : ch0s\5.7.html) 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 背 景 图 片 : </h4> 
<table border="1" 
background="images/1.gif"> 
<tr> 
<td>100</td> 
<td>200</td> 
</Er> 
<tr> 
<td>300</td> 
<td>400</td> 
/ER 
</table> 
</body> 
</html> 
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在 下 9.0 中 预览 网 页 的 效果 如 图 5-8 所 示 。 
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5.2.6 ”案例 6 一 一 设置 单元 格 背景 


除了 可 以 为 表格 设置 背景 外 ， 还 可 以 为 单元 格 设置 背景 。 下 面 为 单元 格 添加 背景 。 
【 例 5.8】 为 单元 格 设置 背景 (实例 文件 : ch05\5.8.html) 


<!DOCTYPE html> 

<html> 

<body> 

<h4> 单 元 格 背景 </h4> 

<table border="1"> 

<tr> 
<td bgcolor="red">100000</td> 
<td>200000</td> 

二 /ET 

<tr> 
<td background="images/1.gif">200000</td> 
<td>300000</td> 

EP 

</table> 

</body> 

</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-9 所 示 。 
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5.2.7 案例 7 一 一 合并 单元 格 


在 实际 应 用 中 ， 并 非 所 有 表格 都 是 规范 的 几 行 几 列 ， 而 是 需要 将 某 些 单元 格 进行 合并 ， 


以 符合 某 种 内 容 上 的 需要 。 在 HTML 中 合并 的 方向 有 两 种 ， 一 种 是 上 下 合并 ， 一 种 是 左右 合 


并 ， 


这 两 种 合并 方式 只 需要 使 用 <td> 标 记 的 两 个 属性 。 

1. 用 colspan 属性 合并 左右 单元 格 

左右 单元 格 的 合并 需要 使 用 <td> 标 记 的 colspan 属性 完成 ， 格 式 如 下 。 
<td colspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，colspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 左右 合并 。 
例如 ， 在 上 面 表格 的 基础 上 ， 将 Al 和 B1 单元 格 合并 成 一 个 单元 格 。 可 为 第 一 行 的 第 一 


个 <td> 标 记 增加 colspan="2" 属 性 ， 并 且 将 Bl 单元 格 的 <td> 标 记 删 除 。 


【 例 5.9】 合 并 左右 单元 格 ( 实 例文 件 ，ch05\5.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 左右 合并 </title> 
</head> 
<body> 
<table border="1"> 
芝 名 这 之 
<td colspan="2">Al1 Bl</td> 
<td>Cl</td> 
</tr> 
EE 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
“E> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-10 所 示 。 
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图 5-10 单元 格 左右 合并 
从 预览 图 中 可 以 看 到 ，Al 和 B1 单元 格 合并 成 一 个 单元 格 ，C1 还 在 原来 的 位 置 上 。 


3 合并 单元 格 以 后 ， 相 应 的 单元 格 标记 就 应 该 减少 ， 例 如 ，Al 和 Bl 合并 后 ，B1 
证 单元 格 的 <td><htd> 标 记 就 应 该 丢掉 ， 否 则 单元 格 就 会 多 出 一 个 ， 并 且 后 面 的 单元 格 会 
依次 向 右 位 移 ， 


2. 用 rowspan 属性 合并 上 下 单元 格 


上 下 单元 格 的 合并 需要 为 <td> 标 记 增 加 rowspan 属性 ， 格 式 如 下 。 
<td rowspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，rowspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 上 下 合并 。 
例如 ， 在 上 面 表格 的 基础 上 ， 将 Al 和 A2 单元 格 合并 成 一 个 单元 格 。 可 为 第 一 行 的 第 一 
个 <td> 标 记 增加 rowspan="2" 属 性 ， 并 且 将 A2 单元 格 的 <td> 标 记 删 除 。 
【 例 5.10】 合并 上 下 单元 格 (实例 文件 :ch05\5.10.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 上 下 合并 </title> 
</head> 
<body> 
<table border="1"> 
Er 
<td rowspan="2">A1</td> 
<td>B1</td> 
<td>cl</td> 
EE 
EE 
<td>B2</td> 
<td>Cc2</tad> 
二 /人 RS 
EE 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
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</tr> 
Er 
<td>A4</td> 
<td>B4</td> 
<td>c4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 9.0 中 预览 网 页 的 效果 如 图 5-11 所 示 。 
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图 5-11 单元 格 上 下 合并 


从 预览 图 中 可 以 看 到 ，A1l 和 A2 单元 格 合并 成 一 个 单元 格 。 

通过 上 面 对 左 右 单元 格 合并 和 上 下 单元 格 合并 的 操作 ， 读 者 会 发 现 ， 合 并 单元 格 就 是 
“丢掉 ” 某 些 单元 格 。 对 于 左右 合并 ， 就 是 以 左 侧 为 准 ， 将 右 侧 要 合并 的 单元 格 “丢掉 ”; 
对 于 上 下 合并 ， 就 是 以 上 侧 为 准 ， 将 下 侧 要 合并 的 单元 格 “丢掉 ”。 如 果 一 个 单元 格 既 要 向 
右 合并 ， 又 要 向 下 合并 ， 该 如 实现 呢 ? 

【 例 $.11】 两 个 方向 合并 单元 格 (实例 文件 : ch05\5.11.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 两 个 方向 合并 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td colspan="2" rowspan="2">A1B1<br>A2B2</td> 
<td>Cl</td> 
/EE 
到 > 
<td>C2</td> 
/EE> 
ER 
<td>A3</td> 
<td>B3</td> 
<td>c3</td> 
AEE 
tr 
<td>A4</td> 
<td>B4</td> 


<td>c4</td> 
二 人/ 二 下 > 
</table> 
</body> 
</html> 


在 正 5.0 中 预览 网 页 的 效果 如 图 5-12 所 示 。 
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图 5-12 两 个 方向 合并 单元 格 
从 上 面 的 代码 可 以 看 到 ，A1l 单元 格 向 右 合 并 B1 单元 格 ， 向 下 合并 A2 单元 格 ， 并 且 A2 
单元 格 向 右 合 并 B2 单元 格 。 
3. 使 用 Dreamweaver CC 合并 单元 格 
使 用 HTML 创建 表格 非常 麻烦 ， 在 Dreamweaver CC 工具 中 ， 提 供 了 表格 的 快捷 操作 ， 
类 似 于 在 Word 中 编辑 表格 的 操作 。 在 Dreamweaver CC 中 创建 表格 ， 只 需要 选择 【插入 】> 


【表格 】 命 令 ， 在 出 现 的 对 话 框 中 指定 表格 的 行 数 、 列 数 、 宽 度 和 边框 ， 即 可 在 光标 处 创建 
一 个 空白 表格 。 选 择 表格 之 后 ，【 属 性 】 面 板 提供 了 表格 的 常用 操作 ， 如 图 5-13 所 示 。 


局 六 尖 衣 六 毅 主 9 JNLH 洒 “性 S “和 
py HB! 







































































国 守 行 H[ | 宽 人 D 像 索 “加 | 填充 加 开间 四 [BA ”Vw 类 | 无 
一 ”可 NO 间 卫 | ] 边框 色 
CE := 
下 


图 5-13 表格 【属性 】 面 板 


@: 表格 【属性 】 面 板 中 的 操作 ， 可 结合 前 面 讲述 的 HTML 语言 。 对 于 按钮 命令 ， 
背 生 将 村 是 信 于 按 乌 之 上 ， 吉 和 之 后 会 出现 命 人 提示 . 


关于 表格 的 操作 不 再 袭 述 ， 请 读者 自行 操作 ， 这 里 重点 讲解 如 何 使 用 Dreamweaver CC 合 
并 单元 格 。 在 Dreamweaver CC 可 视 化 操作 中 ， 提 供 了 合并 与 拆 分 单元 格 两 种 操作 。 拆 分 单元 
格 的 操作 ， 其 实 还 是 进行 合并 操作 。 进 行 单元 格 合并 和 拆 分 时 ， 将 光标 置 于 单元 格 内 ， 如 果 
选择 了 一 个 单元 格 ， 拆 分 命令 有 效 ， 如 图 5-14 所 示 ; 如 果 选 择 了 两 个 或 两 个 以 上 单元 格 ， 合 
并 命令 有 效 。 
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案例 课堂 Bb 
| 《>rmL| 格式 @) 无 图 类 | 无 vBI 江 搓 丝 些 标题 | 
ES DD 无 | 链接 四 YB 口 目标 @ 

| 水 平 外) 默认 YY 宽 四 不 换行 @) 口 。 青 景 颜色 (G) 厂 -| [页 面 属性 ..， ] 
































mm 台中 默认 Y 高 中 标题 字 ) 口 
3 单元 格 


图 5-14 拆 分 单元 格 有 效 
5.2.8 ”案例 8 一 一 排列 单元 格 中 的 内 容 


使 用 align 属性 可 以 排列 单元 格 中 的 内 容 ， 以 便 创 建 一 个 美观 的 表格 。 
【 例 5.12】 排 列 单元 格 内 容 ( 实 例文 件 ，ch05\5.12.html) 


<!DOCTYPE html> 
<html> 
<body> 
<table width="400" border="1"> 
<tr> 
<th align="left"> 项 目 </th> 
<th align="right"> 一 月 </th> 
<th align="right"> 二 月 </th> 
</tr> 
<tr> 
<td align="left"> 衣 服 </td> 
<td align="right">$241.10</td> 
<td align="right">$50.20</td> 
</tr> 
<tr> 
<td align="left"> 化 妆 品 </td> 
<td align="right">$30.00</td> 
<td align="right">$44.45</td> 
</tr> 
<tr> 
<td align="left"> 食 物 </td> 
<td align="right">$730.40</td> 
<td align="right">$650.00</td> 
</tr> 
<tr> 
<th align="left"> 总 计 </th> 
<th align="right">$1001.50</th> 
<th align="right">$744.65</th> 
</tr> 
</table> 
</body> 
</html> 


在 正 5.0 中 预览 网 页 的 效果 如 图 5-15 所 示 。 
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5-15 ”程序 运行 结果 


5.2.9 ”案例 9 一 一 设置 单元 格 的 行 高 与 列 宽 


使 用 cell padding 属性 可 以 创建 单元 格 内 容 与 其 边框 之 间 的 空白 ， 从 而 调整 表格 的 行 高 与 
列 宽 。 
【 例 5.13】 设 置 单元 格 的 行 高 与 列 宽 ( 实 例文 件 ，ch05\5.13.html) 


<!DOCTYPE html> 

<html> 

<body> 

<h4> 调 整 前 </h4> 

<table border="1"> 

<Er> 
<td>1000</td> 
<td>2000</td> 

</tr> 

<tr> 
<td>2000</td> 
<td>3000</td> 

</tr> 

</table> 

<h4> 调 整 后 </h4> 

<table border="1" 

cell padding="10"> 

人 
<td>1000</td> 
<td>2000</td> 

</tr> 

<tr> 
<td>2000</td> 
<td>3000</td> 

</Er> 

</table> 

</body> 

</html> 


在 正 5.0 中 预览 网 页 的 效果 如 图 5-16 所 示 。 


GG 
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案例 课堂 一 
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图 5-16 程序 运行 结果 


5.3 ”案例 10 一 一 创建 完整 的 表格 


前 面 讲述 了 表格 中 最 常用 也 是 最 基本 的 3 个 标记 <table>、<tr> 和 <td>， 使 用 它们 可 以 构建 
出 最 简单 的 表格 。 为 了 让 表格 结构 更 清楚 ， 以 及 配合 后 面 学 习 的 CSS 样式 ， 更 方便 地 制作 各 
种 样式 的 表格 ， 下 面 为 表格 中 添加 表 头 、 主 体 、 脚 注 等 。 

按照 表格 结构 ， 可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”。 不 同 的 行 组 具有 不 同 的 意义 。 行 
组 分 为 3 类 即 “ 表 头 ”“ 主 体 ” 和 “脚注 ”。 三 者 相应 的 HTML 标记 依次 为 <thead>、 
<tbody> 和 <tfoot>。 

此 外 ， 在 表格 中 还 有 两 个 标记 。 标 记 <caption> 表 示 表 格 的 标题 。 在 一 行 中 ， 除 了 <td> 标 
记 表 示 一 个 单元 格 以 外 ， 还 可 以 使 用 <th> 表 示 该 单元 格 是 这 一 行 的 “行头 ”。 

【 例 $.14】 完 整 表格 (实例 文件 : ch05\5.14.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 完 整 表格 标记 </title> 

<style> 

tfoot{ 
background-color:#FF3; 





} 
</style> 
</head> 
<body> 
<table border="]"> 
<caption> 学 生成 绩 单 </caption> 
<thead> 
<tr> 
<th> 姓 名 </th><th> 性 别 </th><th> 成 绩 </th> 
</tr> 
</thead> 
<tfoot> 
<Er> 
<td> 平 均 分 </td><td colspan="2">540</td> 


攻 S 没 中 5 


过 /ET 
</ 七 foot> 
<tbody> 
E> 
<td> 张 三 </td><td> 男 </td><td>560</td> 
eHEF> 
E> 
<td> 李 四 </td><td> 男 </td><td>520</td> 
EES 
</tbody> 
</table> 
</body> 
</html> 


从 上 面 的 代码 可 以 发 现 ， 使 用 <caption> 标 记 表 格 定义 了 表格 标题 ，<thead>、<tbody> 和 
<tfoot> 标 记 对 表格 进行 了 分 组 。 在 <thead> 部 分 使 用 <th> 标 记 代 蔡 <td> 标 记 定 义 单元 格 ，<th> 
标记 定义 的 单元 格 默认 加 粗 。 网 页 预览 效果 ， 如 图 5-17 所 示 。 
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图 5-17 完整 的 表格 结构 


全: <caption> 标 记 必 须 紧 随 <table> 标 记 之 后 。 


EE 


5.4 ”案例 11 一 一 认识 表单 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 ， 其 标记 为 <form>、</form>。 表 单 的 基本 语 
法 格式 如 下 。 

<form action="url" method="get|post" enctype="mime"> 

</form > 

其 中 ，action 指定 处 理 提交 表单 的 格式 ， 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 址 。 
method 指明 提交 表单 的 HTTP 方法 。enctype 指明 用 来 把 表单 提交 给 服务 器 时 的 互联 网 媒体 
形式 。 

表单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 
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案例 课堂 四 一 





【 例 5.15】 表 单 (实例 文件 : ch05\5.15.htmD) 


<!1DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br> 

用 户 名 称 

<input type="text" name="user"> 
<br> 

用 户 密码 

<input type="password" name="password"> 
<br> 

<input type="submit"” value=" 登 录 "> 
</form> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 5-18 所 示 ， 可 以 看 到 用 户 登录 信息 页 面 。 
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| 用 户 名 称 














用户 密码 
EE 








图 5-18 用 户 登录 窗口 


5.5 ”表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 。 常 见 的 有 文本 框 、 密 码 框 、 下 拉 列 表 
框 、 单 选 按钮 和 复 选 框 等 。 本 节 主 要 讲述 表单 基本 元 素 的 使 用 方法 和 技巧 。 


5.5.1 案例 12 一 一 单行 文本 输入 框 text 


文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 者 简短 的 回 
答 ， 如 用 户 姓名 和 地 址 等 。 代 码 格式 如 下 。 


<input type="text" name="..." size=".." maxlength=".." value="."> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ，name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准 
确 采 集 ， 必 须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽 
度 ; maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 

















0 


【 例 5.16】 单 行文 本 输入 框 (实例 文件 ，ch05\5.16.html) 


<!DOCTYPE html> 

<html> 

<head><tit1le> 输 入 用 户 的 姓名 </title></head> 

<body> 

<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 

</body> 

</html> 


在 还 9.0 中 浏览 的 效果 如 图 5-19 所 示 ， 可 以 看 到 两 个 单行 文本 输入 框 。 
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图 5-19 单行 文本 输入 框 


5.5.2 ”案例 13 一 一 多 行文 本 输入 框 textarea 
多 行 输入 框 (textarea) 主 要 用 于 输入 较 长 的 文本 信息 ， 代 码 格 式 如 下 。 


<textarea name=".." cols="." IOWS="..."” Wrap=".."></textarea > 


其 中 ，name 属性 定义 多 行文 本 输入 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 
一 无 二 的 名 称 ; cols 属性 定义 多 行文 本 输入 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; rows 属性 定义 
多 行文 本 框 的 高 度 ， 单 位 是 单个 字符 高 度 。wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 
【 例 5.17】 多 行文 本 输入 框 (实例 文件 ，ch05\5.17.html) 


<1DOCTYPE html> 

<html> 
<head><title> 多 行文 本 输入 </title></head> 
<body> 

<form> 

请 输入 您 最 新 的 工作 情况 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 下 9.0 中 浏览 的 效果 如 图 5-20 所 示 ， 可 以 看 到 多 行文 本 输入 框 。 
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案例 课堂 »… 








文件 站 ”六 对 日” 豆 者 (V】 次 这 天 向 工 基 人 帮 动 1) 





请 输入 您 最 新 的 工作 情况 

















图 5-20 多 行文 本 输入 杠 
5.5.3 ”案例 14 一 一 密码 输入 框 password 


密码 输入 框 是 一 种 特殊 的 文本 域 ， 主 要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文本 
时 ， 显 示 的 是 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 代 码 格式 如 下 。 


<input type="password" name=".." size=".." maxlength=".."> 


其 中 type="password" 定 义 密码 框 ，name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ，size 属 
性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 ，maxlength 属性 定义 最 多 输入 的 字符 数 。 
【 例 5.18】 密 码 输入 框 (实例 文件 : ch05\5.18.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 姓名 和 密码 </title></head> 
<body> 

<form > 

用 户 姓 名 : 

<input type="text" name="yourname"> 

<br> 

登录 密码 : 

<input type="password" name="yourpw"><br> 
</form> 

</body> 

</html> 


在 I 下 9.0 中 浏览 的 效果 如 图 5-21 所 示 ， 输 入 用 户 名 和 密码 时 可 以 看 到 密码 以 黑 点 的 形式 
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用 户 姓名 ， ty 
登录 密码 ， oo 








5-21 密码 输入 框 


5.5.4 ”案例 15 一 一 单 选 按钮 radio 
单 选 按钮 主要 是 让 网 页 浏览 者 在 一 组 选项 里 只 能 选择 一 个 。 代 码 格式 如 下 。 


<input type="radio" name=".." Value 三 "."> 

其 中 type="radio" 定 义 单 选 按钮 ，name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 
单位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 ; value 属性 定义 单 选 按钮 的 值 ， 在 同 
一 组 中 ， 它 们 的 域 值 必须 是 不 同 的 。 

【 例 $.19】 单 选 按钮 (实例 文件 : ch05\5.19.html) 


<!DOCTYPE html> 


局 六 夫 毁 洲 削 旦 9 JNLH 酒 贡 9 “ 
py HB! 


<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 : 

<br> 

<input type="radio" name="book" value = "Book1"> 网 站 编程 <br> 
<input type="radio" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="radio" name="book" value = "Book3"> 设 计 软 件 <br> 
<input type="radio" name="book" value = "Book4"> 网 络 管理 <br> 
<input type="radio" name="book" value = "Book5"> 黑 客 攻 防 <br> 
</form> 

</body> 

</html> 


在 下 9.0 中 浏览 的 效果 如 图 5-22 所 示 ， 可 以 看 到 5 个 单 选 按钮 ， 用 户 只 能 选择 其 中 一 个 
单 选 按钮 。 





文件 咯 。 六 满 6。 下 看 必 硬 (A】 工具 TT) 帮 屿 (H) 
请 选择 您 感 兴 趣 的 图 书 类 型 ， 
日 网 站 编程 











图 5-22 单 选 按钮 
5.5.5 ”案例 16 一 一 复 选 框 checkbox 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 可 以 同时 选择 多 个 选项 。 每 个 复 选 框 都 是 一 个 
独立 的 元 素 ， 都 必须 有 一 个 唯一 的 名 称 。 代 码 格式 如 下 。 


<input type="checkbox" name=".." value =".."> 


其 中 type="checkbox" 定 义 复 选 框 ，name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 都 
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必须 用 同一 个 名 称 ; value 属性 定义 复 选 框 的 值 。 
【 例 5.20】 复 选 框 (实例 文件 ，ch05\5.20.html) 


<!DOCTYPE html> 





<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 : <br> 

<input type="checkbox" name="book" value = "Book1"> 网 站 编程 <br> 
<input type="checkbox" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="checkbox" name="book" value = "Book3"> 设 计 软件 <br> 
<input type="checkbox" name="book" value = "Book4"> 网 络 管理 <br> 


<input type="checkbox" name="book" value "Book5"” checked> 黑 客 攻 防 <br> 











</form> 
</body> 
</html> 
在 正 9.0 中 浏览 的 效果 如 图 5-23 所 示 ， 可 以 看 到 5 个 复 选 枉 ， 其 中 【黑客 攻防 】 复 选 杠 
被 默认 选中 。 
文件 (月 ” 沪 铝 (E) 。 豆 看 (V) 收藏 突 (A) ”工具 (TD) 帮助 (H) 
| 清寺 择 您 感 兴 直 的 图 书 类 型 
目 网 站 编程 
加 办公 软件 
回 设计 软件 
四 网 络 管理 
回 黑客 攻防 
图 5-23 复 选 框 的 效果 
pe checked 属性 主要 是 设置 默认 选中 项 。 





5.5.6 ”案例 17 一 一 下 拉 列 表 框 select 


下 拉 列 表 框 主要 用 于 在 有 限 的 空间 里 设置 多 个 选项 。 下 拉 列 表 框 既 可 以 用 于 单 选 ， 也 可 
以 用 做 复 选 。 代 码 格式 如 下 。 


<select name="..." size=".." multiple> 
<option value=".." selected> 





</option> 
</select> 


其 中 size 属性 定义 下 拉 列 表 框 的 行 数 ，name 属性 定义 下 拉 列 表 框 的 名 称 ，multiple 属性 


表示 可 以 多 选 ， 如 果 不 设置 本 属性 ， 那 么 只 能 单 选 ; value 属性 定义 选择 项 的 值 ，selected 属 
性 表示 默认 已 经 选择 本 选项 。 
【 例 5.21】 下 拉 列 表 框 (实例 文件 : ch05\5.21.html) 


<!DOCTYPE html> 

<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form> 

请 选择 您 感 兴趣 的 图 书 类 型 ，<br> 

<select name="book" size = "3" multiple> 
<option value="Book1"> 网 站 编程 

<option value="Book2"> 办 公 软 件 

<option value="Book3"> 设 计 软 件 

<option value="Book4"> 网 络 管理 

<option value="Book5"> 黑 客 攻 防 

</select> 

</form> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 5-24 所 示 ， 可 以 看 到 下 拉 列 表 框 中 显示 为 3 个 选项 ， 用 户 可 以 
按 住 Ctrl 键 ， 选 择 多 个 选项 。 
ED MAE BEV CR TR WO 
请 选择 您 感 兴趣 的 图 书 类 型 ， 
网 站 编程 习 
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5-24 ”下拉 列表 框 的 效果 


5.5.7 ”案例 18 一 一 普通 按钮 button 
普通 按钮 用 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 代 码 格式 如 下 。 


<input type="button" name="." value=".." onClick=".."> 

其 中 type="button" 定 义 普通 按钮 ，name 属性 定义 普通 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 ; onClick 属性 表示 单 击 行为 ， 也 可 以 是 其 他 的 事件 ， 通 过 指定 脚本 函数 来 定义 按钮 
的 行为 。 

【 例 $.22】 普 通 按钮 (实例 文件 : ch05\5.22.htmD) 





<1DOCTYPE html> 
<html> 
<body> 
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<form> 

单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 复 制 到 文本 框 2 中 : 

<br/> 

文本 框 1: <input type="text" id="field1" value=" 学 习 HTML 5 的 技巧 "> 
<br/> 

文本 框 2 : <input type="text" id="field2"> 

<br/> 

<input type="button"” name="..” value=" 单 击 我 " 
onClick="document .getElementById('field2') .value=document. 
getElementById('fieldl1') .value"> 

</form> 

</body> 

</html> 


在 下 9.0 中 浏览 的 效果 如 图 5-25 所 示 ， 单 击 【 单 击 我 】 按 钮 ， 即 可 实现 将 【文本 框 1】 
中 的 内 容 复制 到 【文本 框 2】 中 。 
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ES 坊 济 (E) 查看 (V) 收藏 失 (A)】 工具 T ” 


美雪 机 的 按 乌 - 起 文本 框 1 的 内 
ER 
文本 框 1: as 


文本 框 2: 学 习 HTIL5 的 技巧 
单 击 我 
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图 5-25 单 击 按钮 后 的 复制 效果 
5.5.8 ”案例 19 一 一 提交 按钮 submit 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 代 码 格式 如 下 。 


<input type="submit" name=".." value="."> 


其 中 type="submit" 定 义 提交 按钮 ， name 属性 定义 提交 按钮 的 名 称 ，value 属性 定义 按钮 
的 显示 文字 。 通 过 提交 按钮 ， 可 以 将 表单 里 的 信息 提交 给 表单 里 action 所 指向 的 文件 。 
【 例 5.23】 提 交 按 钮 (实例 文件 ，ch05\5.23.html) 


<1DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 名 信息 </title></head> 
<body> 

<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 你 的 姓名 : 

<input type="text" name="yourname"> 
<br> 

请 输入 你 的 住址 : 

<input type="text" name="youradr"> 

<br> 


请 输入 你 的 单位 : 


全 


<input type="text" name="yourcom"> 
<br> 

请 输入 你 的 联系 方式 : 

<input type="text" name="yourcom"> 
<br> 

<input type="submit™ value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 9.0 中 浏览 的 效果 如 图 5-26 所 示 ， 输 入 内 容 后 单 击 【 提 交 】 按 钮 ， 即 可 实现 将 表单 
中 的 数据 发 送 到 指定 的 文件 中 。 
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请 输入 你 的 姓名 ， | 
请 输入 你 的 住址 ， 


请 输入 你 的 单位 ， 
请 输入 你 的 联系 方式 , 
本 
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图 5-26 提交 按钮 
5.5.9 ”案例 20 一 一 重 置 按钮 reset 
复位 按钮 用 来 重 置 表单 中 输入 的 信息 。 代 码 格式 如 下 。 


<input type="reset" name="..."” value=".."> 


其 中 type="reset" 定 义 复位 按钮 ，name 属性 定义 复位 按钮 的 名 称 ，value 属性 定义 按钮 的 
显示 文字 。 
【 例 5.24】 重 置 按钮 (实例 文件 ，ch05\5.24.html) 


<1DOCTYPE html> 

<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type='text'> 

<br/> 

请 输入 用 户 密码 : 

<input type='password'> 

<br> 

<input type="submit" value=" 登 录 "> 
<input type="reset"” value=" 重 置 "> 
</form> 

</body> 

</html> 


在 正 9.0 中 浏览 的 效果 如 图 5-27 所 示 ， 输 入 内 容 后 单 击 【 重 置 】 按 钮 ， 即 可 实现 将 表单 
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中 的 数据 清空 的 目的 。 








图 5-27 重 置 按钮 


5.6 表单 高 级 元 素 的 使 用 


除了 上 述 基本 元 素 外 ，HTML 5 中 还 有 一 些 高 级 元 素 。 包 括 url、email、time、range 和 
search 等 。 对 于 这 些 高 级 属性 ，IE 9.0 浏览 器 暂时 还 不 支持 ， 下 面 将 用 Opera 11.60 浏览 器 查 
看 效果 。 


5.6.1 案例 21 一 一 url 属性 的 应 用 


url 属性 用 于 说 明 网 站 的 网 址 ， 显 示 为 一 个 文本 字段 输入 框 。 在 提交 表单 时 ， 会 自动 验证 
url 的 值 。 代 码 格式 如 下 。 


<input type="url" name="userurl"/> 


另外 ， 用 户 可 以 使 用 普通 属性 设置 url 输入 框 ， 例 如 ， 可 以 使 用 max 属性 设置 其 最 大 
值 、min 属性 设置 其 最 小 值 、step 属性 设置 合法 的 数字 间隔 、value 属性 规定 其 默认 值 。 对 于 
其 他 的 高 级 属性 ， 同 样 的 设置 不 再 重复 讲述 。 

【 例 5.25】url 属性 (实例 文件 ，ch05\5.25.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 网 址 : 

<input type="url" name="userurl"/> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 浏览 的 效果 如 图 5-28 所 示 ， 用 户 即 可 输入 相应 的 网 址 。 
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图 5-28 url 属性 的 效果 


5.6.2 ”案例 22 一 一 email 属性 的 应 用 


与 url 属性 类 似 ，email 属性 用 于 让 浏览 者 输入 E-mail 地 址 。 在 提交 表单 时 ， 会 自动 验证 
email 域 的 值 。 代 码 格式 如 下 。 


<input type="email" name="user email"/> 


【 例 5.26】email 属性 (实例 文件 : ch05\5.26.htmlD) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 您 的 邮箱 地 址 : 

<input type="email" name="user email"/> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 浏览 的 效果 如 图 5-29 所 示 ， 用 户 即 可 输入 相应 的 邮箱 地 址 。 如 果 用 户 











5-29 email 属性 的 效果 
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5.6.3 ”案例 23 一 一 date 和 time 属性 的 应 用 


在 HIML 5 中 ， 新 增 了 一 些 日 期 和 时 间 输 入 类 型 ， 包 括 date、datetime、datetime-local、 
month、week 和 time。 具 体 含义 如 表 5-1 所 示 。 


表 5-1 日 期 和 时 间 输 入 属性 表 














属 性 含义 
date 选取 日 、 月 、 年 
month 选取 月 、 年 
week 选取 周 和 年 
time 选取 时 间 
datetime 选取 时 间 、 日 、 月 、 年 





datetime-local 


选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 
上 述 属性 的 代码 格式 类 似 ， 以 date 属性 为 例 ， 代 码 格式 如 下 。 


<input type="date" name="user date" /> 


【 例 5.27】date 属性 (实例 文件 ch05\5.27.htmD 


<!DOCTYPE html> 
<html> 

<body> 

<form> 

<br/> 

请 选择 购买 商品 的 日 期 : 
<br> 

<input type="date" name="user date" /> 
</form> 

</body> 

</html> 


在 Opera 11.6 中 浏览 的 效果 如 图 5-30 所 示 ， 用 户 单 击 输入 框 中 的 向 下 按钮 ， 即 可 在 弹出 
的 窗口 中 选择 需要 的 日 期 。 
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图 5-30 date 属性 的 效果 


5.6.4 ”案例 24 一 一 number 属性 的 应 用 


number 属性 提供 了 一 个 数字 的 输入 类 型 。 用 户 可 以 直接 输入 数字 ， 或 者 通过 单 击 微调 框 


中 的 向 上 或 者 向 下 按钮 选择 数字 。 代 码 格式 如 下 。 


<input type="number" name="shuzi" /> 


【 例 5.28】number 属性 (实例 文件 ，ch05\5.28.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

此 网 站 我 曾经 来 

<input type="number"” name="shuzi "/> 次 了 哦 ! 
</form> 

</body> 

</html> 


在 Opera 11.6 中 浏览 的 效果 如 图 5-31 所 示 ， 用 户 可 以 直接 输入 数字 ， 也 可 以 单 击 微调 按 


钮 选择 合适 的 数字 。 


os 局 十 讨 
MW fie/localhosyeyUs.. x | 二 [a 
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此 网 站 开 首 经 末 5 国 冰 了 或 





图 5-31 number 属性 的 效果 


pr 强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 


5.6.5 ”案例 25 一 一 range 属性 的 应 用 


range 属性 用 于 显示 一 个 滚动 的 控件 。 和 number 属性 一 样 ， 用 户 可 以 使 用 max、min 和 


step 属性 控制 控件 的 范围 。 代 码 格式 如 下 。 
<input type="range" name=".." min="" max="." /> 
其 中 min 和 max 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 
【 例 5.29】range 属性 (实例 文件 : ch05\5.29.html) 


<!DOCTYPE html> 
<html> 
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<body> 

<form> 

<br/> 

英语 成 绩 公 布 了 ! 我 的 成 绩 名 次 为 : 

<input type="range" name="ran" min="1"” max="10" /> 
</form> 

</body> 

</html> 


在 Opera 11.6 中 浏览 的 效果 如 图 5-32 所 示 ， 用 户 可 以 拖 忠 滑 块 ， 从 而 选择 合适 的 数字 。 
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5-32 range 属性 的 效果 


py 默认 情况 下 ， 滑 块 位 于 滚 轴 的 中 间 位 置 。 如 果 用 户 指定 的 最 大 值 小 于 最 小 值 ， 则 
民 允许 使 用 反 向 滚动 轴 ， 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 。 


5.6.6 ”案例 26 一 一 required 属性 的 应 用 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。required 属性 适用 于 以 下 类 型 的 
输入 属性 : text，search，url，email，password，date，Ppickers，number，checkbox 和 radio 等 。 
【 例 5.30】required 属性 (实例 文件 : ch05\5.30.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br> 

用 户 名 称 

<input type="text" name="user" required="required"> 
<br> 

用 户 密码 

<input type="password" name="password" required="required"> 
<br> 

<input type="submit" value=" 登 录 "> 

</form> 

</body> 

</html> 


在 Opera 11.6 中 浏览 的 效果 如 图 5-33 所 示 ， 如 果 用 户 只 是 输入 密码 就 单 击 【 登 录 】 按 
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钮 ， 将 弹出 提醒 信息 。 
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图 5-33 required 属性 的 效果 


5.7 ”综合 案例 1 一 一 创建 用 户 反 馈 表 单 


本 实例 中 ， 将 使 用 一 个 表单 内 的 各 种 元 素来 开发 一 个 网 站 的 用 户 意见 简单 反馈 页 面 。 

具体 操作 步骤 如 下 。 

CE 了 TY 分 析 需 求 如 下 。 反 馈 表单 非常 简单 ， 通 常 包 含 3 个 部 分 : 在 页 面 上 方 给 出 标 
题 ， 标题 下 方 是 正文 部 分 ， 即 表单 元 素 ; 最 下 方 是 表单 元 素 提 交 按 钮 。 在 设计 这 个 
页 面 时 ， 需 要 把 【用 户 注册 】 标 题 设置 成 hl 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 

ECESRP9 构建 HIML 页 面 ， 实 现 表 单 内 容 ， 代 码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 用 户 反 馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反 馈 表 单 </h1> 
<form method="post" > 

<p> 姓 gnbsp; snbsp; gnbsp; gnbsp; 名 : 
<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 gnbsp; snbsp; snbsp; gnbsp; 别 : 
<input type="radio" value="male"” /> 男 
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<input type="radio" value="female" /> 女 
</p><p> 年 gnbsp; gnbsp; &gnbsp; &nbsp; 龄 : 

<input type="text" class=txt name="age" /> 
</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 
</p> 


<p> 
请 输入 您 对 网 站 的 建议 <br> 
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<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" name="submit" value=" 提 交 "/> 

<input type="reset" name="reset"” value=" 清 除 ” /> 

</p> 

</form> 

</body> 

</html> 


在 正 9.0 中 浏览 的 效果 如 图 5-34 所 示 ， 可 以 看 到 创建 了 一 个 用 户 反馈 表单 ， 包 含 一 个 标 
题 “ 用 户 反馈 表单 ”“ 姓 名 ”“ 性 别 ” “年龄 ”“ 联 系 电话 ” “电子 邮件 ”“ 联 系 地 址 ”、 
意见 反馈 等 输入 框 和 【提交 】 按 钮 等 。 


























时 chusersvinodac PD -上 X | @ rem 
文件 站。 篇 问 (E) 可 看 (V) 收藏 天 (A) 工具) 帮助 (H) 
用 户 反 馈 表 单 
姓 名 | 
性 ” 别 ，e@ 男 @ 女 
年 ”的 ， 
联系 电话 ， 
NM 电 了 邮件 ， 
联系 地 址 ， 
请 输入 您 对 网 站 的 建议 
EE 




















图 5-34 ”用户 反 馈 页 面 


5.8 综合 案例 2 一 一 制作 商品 报价 表 


本 实例 利用 所 学 的 表格 知识 ， 制 作 如 图 5-35 所 示 的 计算 机 报价 表 。 
具体 操作 步骤 如 下 。 
EEC 新 建 HIML 文档 并 对 其 简化 ， 代 码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-5" /> 
<title> 完 整 表格 标记 </title> 
</head> 

<body> 

</body> 

</html> 


sy 


计算 机 报价 单 


型 号 类 型 价格 图 片 











宏基 (Acen AS4552-P362G32MNCC 笔记 本 ¥2799 


~" 
融 尔 Dell) 14VR-188 笔记 本 站 3499 
联想 Cenovo) G470AH2310W42G500P7CW3(DB)-CN 笔记 本 疗 4149 ”| 


地 州 过 起 沙 泪 全 9 WlIH 泗 山 9 溃 重 





项 尔 家 用 (DELL) 1560SR-656 各 式 |¥¥3599 | 


有 GZ 


宏图 奇 晤 (Hiteken) HS-5508-TF 台式 | 站 3399 


| 联 租 (Lenovo) G470 笔记 本 | 站 4299 I- | 





图 5-35 计算 机 报价 单 


国保 存 HTML 文件 ， 选 择 相 应 的 保存 位 置 ， 文 件 名 为 “计算 机 报价 单 .html”。 
在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 代 码 如 下 。 


<table> 
<caption> 计 算 机 报价 单 </caption> 
EA 
<th> 型 号 </th> 
<th> 类 型 </th> 
<th> 价 格 </th> 
<th> 图 片 </th> 
</tr> 
了 台 守 - 
<td> 宏 幕 (Acer) AS4552-P362G32MNCC</td> 
<td> 笔 记 本 </td> 
<td>¥2799</td> 
<td><img src="images/Acer.jpg" width="120" height="120"></td> 
Er 
E44 到 学 性 
<td> 戴 尔 (Del1) 14VR-188</td><td> 笔 记 本 </td> 


ss@ 
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<td>¥3499</td> 

<td><img src="images/Dell.jpg" width="120" height="120"></td> 
</tr> 

EE 

<td> 联 想 (Lenovo) G470AH2310W42G500P7CW3 (DB) -CN </td> 
<td> 笔 记 本 </td> 

<td>¥4149</td> 

<td><img src="images/Lenovo.jpg" width="120" height="120"></td> 
REE> 
<tr> 

<td> 戴 尔 家 用 (DELL) I560SR-656</td> 

<tqd> 人 台式 </td> 

<td>¥3599</td> 

<td><img src="images/DellT.jpg" width="120" height="120"></td> 
</tr> 
J 

<td> 宏 图 奇 蛇 (Hiteker) HS-5505-TF</td> 

<td> 台 式 </td> 

<td>¥3399</td> 

<td><img src="images/Hiteker.jpg" width="120" height="120"></td> 
</tr> 
<tr> 

<td> 联 想 (Lenovo) G470</td> 

<td> 笔 记 本 </td> 

<td>¥4299</td> 

<td><img src="images/LenovoG.jpg" width="120" height="120"></td> 
</tr> 

</table> 


代码 中 ， 利 用 caption 标记 制作 表格 的 标题 ，<th> 代 蔡 <td> 作 为 标题 行 单元 格 。 可 以 将 图 
片 放 在 单元 格 内 ， 即 在 <td> 标 记 内 使 用 <img> 标 记 。 
EEC 在 HTML 文档 的 head 部 分 ， 增 加 CSS 样式 ， 为 表格 增加 边框 及 相应 的 修饰 ， 
代码 如 下 。 
<style> 


tablef{ 


/* 表 格 增加 线 宽 为 3 的 橙色 实 线 边 框 */ 
border:3px solid #F60; 





} 

caption{ 
/* 表 格 标题 字号 36*/ 
font-size:36px; 

} 

thvtdi 
/* 表 格 单元 格 (th、tq) 增加 边线 */ 
border:lpx solid #F50; 

} 

</style> 


国 了 BY 保存 网 页 后 ， 即 可 查看 最 终 效 果 。 


5.9 高 手 甜 点 


甜点 1: 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 ? 


在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 非常 单调 ， 当 时 美国 设计 师 David 
Siegel 发 明了 使 用 表格 进行 布局 ， 风 靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 
还 要 控制 页 面 的 外 观 及 显示 位 置 ， 导 致 页 面 代 码 过 多 ， 结 构 与 内 容 无 法 分 离 。 这 样 就 给 网 站 
的 后 期 维护 和 其 他 方面 带 来 了 很 多 麻烦 。 

甜点 2: 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 

在 HTML 文档 中 增加 <thead>、<tbody> 和 <tfoot> 标 记 ， 虽 然 从 外 观 上 不 能 看 出 任何 变 
化 ， 但 是 它们 却 使 文档 的 结构 更 加 清晰 。 使 用 <thead>、<tbody> 和 <tfoot> 标 记 ， 除 了 使 文档 更 
加 清晰 之 外 ， 还 有 一 个 更 重要 的 意义 ， 即 方便 使 用 CSS 样式 对 表格 的 各 个 部 分 进行 修饰 ， 从 
而 制作 出 更 炫 的 表格 。 

甜点 3: 如 何在 表单 中 实现 文件 上 传 框 ? 

在 HTML 5 语言 中 ， 可 使 用 file 属性 实现 文件 上 传 框 。 语 法 格式 为 : <input type="file" 
name="..." size="..." maxlength="...">。 其 中 type="file" 定 义 为 文件 上 传 框 ，name 属性 为 文件 上 
传 框 的 名 称 ; size 属性 定义 文件 上 传 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; maxlength 属性 定义 最 
多 输入 的 字符 数 。 文 件 上 传 框 的 显示 效果 如 图 5-36 所 示 。 











cAUsersyingda\t 只 ~ © X | @ cAUsersyingd! 








文件 (月 ” 妨 强 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 











图 5-36 文件 上 传 框 
甜点 4: 制作 的 单 选 按钮 为 什么 可 以 同时 选中 多 个 ? 
此 时 用 户 需 要 检查 单 选 按钮 的 名 称 ， 保 证 同一 组 中 的 单 选 按钮 名 称 相 同 ， 这 样 才能 保证 
单 选 按钮 只 能 同时 选中 其 中 一 个 。 


全 
a 
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练习 1: 
练习 2: 
练习 3: 
练习 4: 
练习 5: 





5.10” 跟 我 练 练 手 


创建 表格 。 

定义 表格 的 属性 。 
创建 完整 的 表格 。 
表单 基本 元 素 的 使 用 。 
表单 高 级 元 素 的 使 用 。 
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6.1 网 页 音频 标记 audio 


目前 ， 大 多 数 音频 是 通过 插件 来 播放 音频 文件 的 ， 如 常见 的 播放 插件 为 Flash， 这 就 是 为 
什么 用 户 在 用 浏览 器 播放 音乐 时 ， 常 常 需要 安装 Flash 插件 的 原因 。 但 是 ， 并 不 是 所 有 的 浏览 
器 都 拥有 同样 的 插件 。 为 此 ， 和 HTML 4 相 比 ，HTML 5 新 增 了 <audio> 标 记 ， 规 定 了 一 种 包 
含 音频 的 标准 方法 。 


6.1.1 _ audio 标记 概述 


<audio> 标 记 主 要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 ， 支 持 3 种 音频 格式 ， 分 别 为 
OGG、MP3 和 WAV。 如 果 需 要 在 HTML 5 网 页 中 播放 音频 ， 输 入 的 基本 格式 如 下 。 


<audio src="song.mp3" controls="controls"> 
</audio> 





其 中 src 属性 是 规定 要 播放 的 音频 地 址 ，controls 属性 供 添加 播放 、 暂 和 停 和 音量 控 
外 。 件 。 另外， 在 <audio> 与 </audio> 之 间 插入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显 
6.1.2 audio 标记 的 属性 
audio 标记 的 常见 属性 和 含义 如 表 6-1 所 示 。 
表 6-1 audio 标记 的 常见 属性 




















属 性 值 描 述 
bly ora 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
controls (控制 | 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 
loop( 循 环 ) 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 
| 如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 
preload( 加 载 ) i 
果 使 用 autoplay， 则 忽略 该 属性 
wl( 地 址 ) 要 播放 的 音频 的 URL 地 址 
oe autobuffer( 自 动 | 在 网 页 显示 时 ， 该 二 进 制 属性 表示 是 由 用 户 代理 (浏览 器 ) 自 动 缓冲 
缓 首 ) 的 内 容 ， 还 是 由 用 户 使 用 相关 API 进行 内 容 缓冲 


另外 ，<audio> 标 记 可 以 通过 source 属性 添加 多 个 音频 文件 ， 具 体格 式 如 下 。 


<audio controls="controls"> 

<source src="123.0gg" type="audio/ogg"> 
<source src="123.mp3" type="audio/mpeg"> 
</audio> 


全 i 


6.1.3 ”音频 解码 器 


音频 解码 器 定义 了 音频 数据 流 编 码 和 解码 的 算法 。 其 中 ， 编 码 器 主要 是 对 数据 流 进行 编 
码 操 作 ， 用 于 存储 和 传输 。 音 频 播 放 器 主要 是 对 音频 文件 进行 解码 ， 然 后 进行 播放 操作 。 目 
前 ， 使 用 较 多 的 音频 解码 器 是 Vorbis 和 ACC 。 


6.1.4 浏览 器 对 audio 标记 的 支持 情况 
目前 ， 不 同 的 浏览 器 对 <audio> 标 记 支 持 情况 也 不 同 。 表 6-2 中 列 出 了 应 用 最 为 广泛 的 浏 
览 器 对 <audio> 标 记 的 支持 情况 。 
表 6-2 <audio> 标 记 的 浏览 器 支持 情况 表 
音频 格式 | ass | [am [mm | -sm 


OggVorbis [一 












Safari 3.0 及 更 
高 版 本 





6.2 网 页 视频 标记 video 


和 音频 文件 播放 方式 类 似 ，HTML 5 提供 的 video 标记 可 以 实现 加 载 视频 文件 的 方法 。 本 
章节 将 详细 讲述 video 标记 的 使 用 方法 和 技巧 。 


6.2.1 video 标记 概述 


<video> 标 记 主 要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 。 支 持 3 种 视频 格式 ， 分 别 为 
OGG、WebM 和 MPEG 4。 
如 果 需 要 在 HTML 5 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 。 


<video src="123.mp4" controls="controls"> 
</ video > 


另外 ， 在 <video> 与 </video> 之 间 插 入 的 内 容 是 供 不 支持 video 元 素 的 浏览 器 显示 的 。 
6.2.2 video 标记 的 属性 
<video> 标 记 的 常见 属性 和 含义 如 表 6-3 所 示 。 





外 
101 $ 
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表 6-3 ”<video> 标 记 的 常见 属性 





属 性 值 描 述 
autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 如 播放 按钮 


loop 如 果 出 现 该 属性 ， 则 每 当 视 频 结束 时 重新 开始 播放 
如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 



































oe autoplay， 则 忽略 该 属性 
url 要 播放 的 视频 的 URL 
width 宽度 值 设置 视频 播放 器 的 宽度 
height 高 度 值 设置 视频 播放 器 的 高 度 
当 视 频 未 响应 或 缓冲 不 足 时 ， 该 属性 值 链接 到 一 个 图 像 。 该 图 像 将 以 一 定 
Bo ul 比例 被 显示 出 来 


由 表 6-3 可 知 ， 用 户 可 以 自 定义 视频 文件 显示 的 大 小 。 例 如 ， 如 果 想 让 视频 以 320 像素 
x240 像素 大 小 显示 ， 可 以 加 入 width 和 height 属性 。 具 体格 式 如 下 。 

<video width="320" height="240" controls src="123.mp4" > 

</video> 

另外 ，video 标记 可 以 通过 source 属性 添加 多 个 视频 文件 ， 有 具体 格式 如 下 。 


<video controls="controls"> 

<source src="123.0gg" type="video/ogg"> 
<source src="123.mp4" type="video/mp4"> 
</ video > 





6.2.3 视频 解码 器 
视频 解码 器 定义 了 视频 数据 流 编码 和 解码 的 算法 。 其 中 ， 编 码 器 主要 是 对 数据 流 进 行 编 


码 操作 ， 用 于 存储 和 传输 。 视 频 播放 器 主要 是 对 视频 文件 进行 解码 ， 然 后 进行 播放 操作 。 
目前 ， 在 HIML 5 中 ， 使 用 比较 多 的 视频 解码 文件 是 Theora、H.264 和 VP8。 


6.2.4 浏览 器 对 video 标记 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 <video> 标 记 的 支持 情况 也 不 同 。 下 面 的 表 6-4 中 列 出 了 应 用 最 为 
广泛 的 浏览 器 对 <video> 标 记 的 支持 情况 。 


表 6-4 <video> 标 记 的 浏览 器 支持 情况 表 











Firefox 4.0 IE 9.0 及 更 | Opera 10.6 及 | Chrome 6.0 及 | Safari 3.0 及 更 
及 更 高 版 本 更 高 版 本 高 版 本 
支持 

支持 

支持 

















6.3 添加 网 页 音频 文件 


在 网 页 中 加 入 音频 文件 ， 可 以 使 单调 的 网 页 变 得 更 加 生动 。 本 节 就 来 介绍 如 何 使 用 audio 
标记 在 网 页 中 添加 音频 文件 。 


6.3.1 案例 1 一 一 设置 背景 音乐 


通过 前 面 的 介绍 了 解 了 网 页 音频 标记 <audio> 的 相关 知识 ， 下 面 就 介绍 一 个 如 何 为 网 页 添 
加 背景 音乐 的 实例 ， 来 学 习 <audio> 标 记 的 具体 应 用 。 
【 例 6.1】 为 网 页 添加 背景 音乐 (实例 文件 : ch06\6.1.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<title>audio</title> 
<head> 
<body > 

<audio src="song.mp3" controls="controls"> 
您 的 浏览 器 不 支持 audio 标记 ! 
</audio> 
</body> 
</html> 


如 果 用 户 的 浏览 器 是 正 9.0 以 前 的 版 本 ， 浏 览 效 果 如 图 6-1 所 示 ， 可 见 焉 9.0 以 前 的 版 
本 不 支持 <audio> 标 签 。 

在 正 中 浏览 的 效果 如 图 6-2 所 示 ， 可 以 看 到 加 载 的 音频 控制 条 ， 并 能 听 到 加 载 的 音频 
文件 。 
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© 0:00:00 国 QO) 国 


您 的 浏览 器 不 支持 audio 标 签 ! 


筷 100% 





图 6-1 不 支持 <audio> 标 签 的 效果 图 6-2 支持 <audio> 标 签 的 效果 


6.3.2 ”案例 2 一 一 设置 音乐 循环 播放 


loop 属性 规定 当 音 频 结束 后 将 重新 开始 播放 。 即 如 果 设 置 该 属性 ， 则 音频 将 循环 播放 。 
语法 格式 如 下 。 


<audio loop="loop" /> 
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【 例 6.2】 设 置 音 乐 循环 播放 (实例 文件 : ch06\6.2.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<audio controls="controls" loop="loop"> 
<source src="song.mp3"/> 

</audio> 

</body> 

</html> 


在 正 中 浏览 的 效果 如 图 6-3 所 示 ， 可 以 看 到 加 载 的 音频 控制 条 ， 并 能 听 到 加 载 的 音频 文 
， 而 且 当 音 频 文件 播放 结束 后 将 会 重新 开始 播放 ， 即 循环 播放 添加 的 音频 文件 。 











图 6-3 设置 音频 文件 循环 播放 效果 


6.4 添加 网 页 视频 文件 


在 网 页 中 加 入 视频 文件 ， 可 以 使 单调 的 网 页 变 得 更 加 生动 。 本 节 就 来 介绍 如 何 使 用 video 
标记 在 网 页 中 添加 视频 文件 。 


6.4.1 案例 3 一 一 为 网 页 添加 视频 文件 


前 面 了 解 了 网 页 视频 标记 <video> 的 相关 知识 ， 下 面 就 介绍 一 个 如 何 为 网 页 添加 视频 文件 
的 实例 ， 来 学 习 <video> 标 记 的 具体 应 用 。 
【 例 6.3】 为 网 页 添加 视频 文件 (实例 文件 ，ch06\6.3.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title>video</title> 
<head> 

<body > 

<video src="123.mp4" controls="controls"> 
您 的 浏览 器 不 支持 video 标记 ! 
</ video > 

</body> 

</html> 


如 果 用 户 的 浏览 器 是 正 9.0 以 前 的 版 本 ， 浏 览 效果 如 图 6-4 所 示 ， 可 见 焉 9.0 以 前 的 版 
本 不 支持 <video> 标 记 。 

在 正 中 浏览 的 效果 如 图 6-5 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 界面 。 单 击 【播放 】 按 
钮 ， 即 可 查看 视频 的 内 容 。 
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图 6-4 不 支持 <video> 标 记 的 效果 图 6-5 支持 <video> 标 记 的 效果 


6.4.2 ”案例 4 一 一 设置 自动 运行 


登录 网 页 时 ， 常 常会 看 到 一 些 视 频 文件 直接 开始 运行 ， 而 不 需要 手动 执行 开始 ， 特 别 是 
- 些 广告 内 容 ， 这 是 通过 autoplay 参数 来 实现 的 。 语 法 格式 如 下 。 
<video src=" 多 媒体 文件 地 址 ”autoplay="autoplay"” ></video> 


【 例 6.4】 设 置 视频 文件 自动 播放 (实例 文件 ，ch06\6.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>video</title> 

<head> 

<body > 

<video src="123.mp4" controls="controls" autoplay="autoplay"> 
</ video > 

</body> 

</html> 


在 下 中 浏览 的 效果 如 图 6-6 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 ， 并 列表 看 到 加 载 的 视频 
文件 自动 播放 。 


有 GZ 














图 6-6 视频 文件 自动 播放 效果 
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6.4.3 ”案例 5 一 一 设置 视频 文件 的 循环 播放 


视频 文件 的 循环 播放 一 般 与 自动 播放 一 起 使 用 ， 与 背景 音乐 的 设置 基本 相同 。 语 法 格式 


如 下 。 


< Video loop="loop" /> 


【 例 6.5】 设 置 视频 文件 循环 播放 (实例 文件 ，ch06\6.5.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

< Video controls="controls" loop="loop"> 
<source src="123.mp4"/> 

</ video > 

</body> 

</html> 


在 正 中 浏览 效果 如 图 6-7 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 和 加 载 的 视频 文件 ， 而 且 当 
视频 文件 播放 结束 后 将 会 重新 开始 播放 ， 即 循环 播放 添加 的 视频 文件 。 


EHTMLSR A 
EEC 
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6-7 ”视频 文件 循环 播放 的 效果 
6.4.4 ”案例 6 一 一 设置 视频 窗口 的 高 度 与 宽度 


在 设计 网 页 视频 时 ， 规 定 视 频 的 高 度 和 宽度 是 一 个 好 习惯 。 如 果 设 置 这 些 属性 ， 在 页 面 
加 载 时 会 为 视频 预 留 出 空间 。 如 果 没 有 设置 这 些 属 性 ， 那 么 浏览 器 就 无 法 预先 确定 视频 的 
尺寸 ， 所 以 就 无 法 为 视频 保留 合适 的 空间 ， 结 果 是 在 页 面 加 载 的 过 程 中 ， 其 布局 也 会 产生 
变化 。 

在 HIML 5 中 ， 视 频 的 高 度 与 宽度 通过 height 和 width 属性 来 设 定 ， 具 体 的 语法 格式 
如 下 。 


<video width="value"” height="value" /> 





【 例 6.6】 设 置 视 频 文件 的 高 度 与 宽度 (实例 文件 : ch06\6.6.html) 


<1DOCTYPE HTML> 

<html> 

<body> 

<video width="320" height="240" controls="controls"> 
<source src="123.mp4" /> 

</video> 

</body> 

</html> 


在 正 中 浏览 的 效果 如 图 6-8 所 示 ， 可 以 看 到 网 页 中 添加 的 视频 文件 以 高 度 240 像素 、 宽 
度 320 像素 的 方式 运行 。 
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图 6-8 设置 视频 文件 的 高 度 与 宽度 
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+: 请 勿 通过 height 和 width 属性 来 缩放 视频 ! 通过 height 和 width 属性 来 缩放 视 
上 法 。 频 ， 只 会 迫使 用 户 下 载 原始 的 视频 (即使 在 页 面 上 看 起 来 较 小 )。 正确 的 方法 是 在 网 页 
上 使 用 该 视频 前 ， 使 用 软件 对 视频 进行 压缩 。 


6.5 添加 网 页 滚动 文字 


网 页 的 多 媒体 元 素 一 般 包 括 动态 文字 、 动 态 图 像 、 声 音 以 及 动画 等 ， 其 中 最 简单 的 就 是 
添加 一 些 滚动 文字 。 
6.5.1 案例 7 一 一 滚动 文字 标记 

使 用 <marquee> 标 记 可 以 将 文字 设置 为 动态 滚动 的 效果 。 该 标记 的 语法 格式 如 下 。 

<marquee> 滚 动 文字 </marquee> 

用 户 只 要 在 标记 之 间 添 加 要 进行 滚动 的 文字 就 可 以 了 ， 而 且 还 可 以 在 标记 之 间 设 置 这 些 
文字 的 字体 、 颜 色 等 。 

【 例 6.7】 添 加 网 页 滚动 文字 (实例 文件 : ch06\6.7.html) 


<!DOCTYPE html> 
<html> 
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<head> 
<title> 文 字 滚动 的 设置 </title> 
</head> 
<body> 
<font size="5" color="#cc0000"> 
文字 滚动 示例 (默认 ) : <marquee> 干 树 万 树 梨 花 开 </marquee> 
</font> 
</body> 
</html> 


在 正 浏览 器 中 预览 的 效果 如 图 6-9 所 示 ， 可 以 看 出 滚动 文字 在 未 设置 宽度 时 ， 
<Imarquee></marquee> 标 记 是 独占 一 行 的 。 








时 文字 党 动 的 设置 其 
文件 (月 ”编辑 {E) ”查看 (V) ” 收 写 夫 (A) ”工具 (D 帮助 (H) 
文字 滚动 示例 (默认): 

千 树 万 树 梨 花 开 
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图 6-9 添加 网 页 滚动 文字 
6.5.2 ”案例 8 一 一 滚动 方向 属性 


<marquee></marquee> 标 记 的 direction 属性 用 于 设置 内 容 滚 动 方向 ， 属 性 值 有 left、 
right、up、down， 分 别 代表 向 左 、 向 右 、 向 上 、 向 下 ， 其 中 向 左 滚动 left 的 效果 与 默认 效果 
相同 ， 而 向 上 滚动 的 文字 则 常常 出 现在 网 站 的 公告 栏 中 。 

direction 属性 的 语法 格式 如 下 。 


<marquee direction=" 滚 动 方向 "> 滚动 文字 </marquee> 


【 例 6.8】 设 置 网 页 滚动 文字 的 方向 (实例 文件 : ch06\6.8.htmD 


<!DOCTYPE html> 
<html> 
<head> 

<title> 文 字 滚 动 的 设置 </title> 
</head> 
<body> 
<font size="5" color="#cc0000"> 
文字 滚动 向 左 (默认 ) : <marquee direction="left"> 千 树 万 树 梨 花 开 </marquee> 
文字 滚动 向 右 (默认 ) : <marquee direction="right"> 干 树 万 树 梨 花 开 </marquee> 
文字 滚动 向 上 (默认 ) : <marquee direction="up"> 千 树 万 树 梨 花 开 </marquee> 
文字 滚动 向 下 (默认 ) : <marquee direction="down"> 干 树 万 树 梨 花 开 </marquee> 
</font> 
</body> 
</html> 


在 正 浏览 器 中 预览 的 效果 如 图 6-10 所 示 ， 其 中 第 1 行文 字 向 左 不 停 地 循环 运行 ， 第 2 
行文 字 向 右 不 停 地 循环 运行 ， 第 3 行文 字 向 上 不 停 地 运行 ， 第 4 行文 字 向 下 不 停 地 运行 。 
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6-10 ”网 页 滚动 文字 的 方向 


6.5.3 ”案例 9 一 一 滚动 方式 属性 


<marquee></marquee> 标 记 的 behavior 属性 用 于 设置 内 容 滚 动 方式 ， 默 认为 scroll， 即 循 
环 滚 动 ， 当 其 值 为 alternate 时 ， 内 容 将 来 回 循环 滚动 ， 当 其 值 为 slide 时 ， 内 容 深 动 一 次 即 停 
止 ， 不 会 循环 。behavior 属性 的 语法 格式 如 下 。 


<marquee behavior=" 滚 动 方式 "> 滚动 文字 </marquee> 
【 例 6.9】 设 置 网 页 文字 的 滚动 方式 (实例 文件 ， ch06\6.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee behavior="scrol1"> 你 好 ， 欢 迎 您 的 光临 </marquee> 
<br><br> 

<marquee behavior ="slide"> 忽 如 一 夜 春风 来 </marquee> 
<br><br> 

<marquee behavior ="alternate"> 千 树 万 树 梨花 开 </marquee> 


</body> A 
</html> 
运行 这 段 代码 ， 可 以 看 到 如 图 6-11 所 示 的 效果 。 其 中 第 1 行文 字 不 停 地 循环 ， 一 图 一 圈 

地 滚动 ， 而 第 2 行文 字 则 在 第 一 次 到 达 浏 览 器 边缘 时 就 停止 了 滚动 ， 第 3 行文 字 则 在 滚动 到 





浏览 器 左边 缘 后 开始 反方 向 运动 。 
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你 好 ,欢迎 您 的 光临 
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6-11 ”网 页 文字 的 滚动 方式 


109 


APP 和 移动 网 站 开发 


案例 课堂 > 一 








6.5.4 ”案例 10 一 一 滚动 速度 属性 


在 设置 滚动 文字 时 ， 有 时 候 可 能 希望 滚动 快 一些 ， 也 有 时 候 希 望 滚动 慢 一 些 ， 这 一 功能 
可 以 使 用 <marquee></marquee> 标 记 的 scrollamount 属性 来 实现 。 其 语法 格式 如 下 。 


<marquee s crollamount= 滚 动 速度 ></marquee> 


在 该 语法 中 ， 滚 动 文字 的 速度 实际 上 是 设置 滚动 文字 每 次 移动 的 长 度 ， 以 像素 为 单位 。 
【 例 6.10】 设 置 网 页 文字 的 滚动 速度 (实例 文件 : ch06\6.10.htmD) 


<!1DOCTYPE html> 

<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee scrollamount=3> 深 动 速度 为 3 像素 的 文字 效果 ! </marquee><br><br> 
<marquee scrollamount=10> 滚 动 速度 为 10 像素 的 文字 效果 ! </marquee><br><br> 
<marquee scrollamount=50> 滚 动 速度 为 50 像素 的 文字 效果 ! </marquee> 
</body> 

</html> 


在 正 中 预览 的 效果 如 图 6-12 所 示 ， 可 以 看 到 3 行文 字 同 时 开始 滚动 ， 但 是 速度 是 不 一 
样 的 ， 设 置 的 scrollamount 越 大 ， 速 度 也 就 越 快 。 
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图 6-12 ”网 页 滚动 文字 的 速度 
6.5.5 ”案例 11 一 一 滚动 延迟 属性 
<marquee></marquee> 标 记 的 scrolldelay 属性 用 于 设置 内 容 滚动 的 时 间 间 隔 。 语 法 格式 如 下 。 


<marquee scrolldelay= 时 间 间 隔 ></marquee> 

scrolldelay 的 时 间 间 隔 单位 是 毫秒 ， 也 就 是 千 分 之 一 秒 。 这 一 时 间 间 隔 的 设置 为 滨 动 两 步 
之 间 的 时 间 间 隔 ， 如 果 设 置 的 时 间 比 较 长 ， 会 产生 走 走 停 停 的 效果 。 另 外 ， 如 果 与 滚动 速度 
scrollamount 参数 结合 使 用 ， 效 果 更 明显 。 

【 例 6.11】 设 置 网 页 文字 的 滚动 延迟 时 间 ( 实 例文 件 ， ch06\6.11.html) 


<!DOCTYPE html> 
<html> 
<head> 





二 
全 i10 


<title> 设 置 深 动 文字 </title> 

</head> 

<body> 

<marquee scrollamount=100 scrolldelay =10> 看 我 不 停 脚 步 地 走 ! </marquee><br><br> 
<marquee scrollamount=100 scrolldelay =100> 看 我 走 走软 软 ! </marquee><br><br> 
<marquee scrollamount=100 scrolldelay =500> 我 要 走 一 步 停 一 停 </marquee> 

</body> 

</html 


运行 这 段 代 码 ， 效 果 如 图 6-13 所 示 ， 其 中 第 一 行文 字 设 置 的 延迟 小 ， 因 此 走 起 来 比较 平 
滑 ， 最 后 一 行 设置 的 延迟 比较 大 ， 看 上 去 就 像 是 走 一 步 软 一 会 儿 的 感觉 。 
[SB mamzs x 


六 从 需 宙 (站 可 看 V) 交大 (A) 工 呈 TD 大 动 H 
看 我 不 停 肢 步 地 走 ! 




















我 要 走 一 步 停 一 停 








图 6-13 ”网 页 滚动 文字 的 延迟 时 间 
6.5.6 ”案例 12 一 一 滚动 循环 属性 


设置 滚动 文字 后 ， 在 默认 情况 下 会 不 断 地 循环 下 去 。 如 果 和 希望 文字 滚动 几 次 就 停止 ， 可 
以 使 用 loop 参数 来 进行 设置 。 语 法 格式 如 下 。 

<marquee Loop=" 循 环 次 数 "> 滚动 文字 </marquee> 

【 例 6.12】 设 置 网 页 文字 的 滚动 循环 数 (实例 文件 : ch06\10.12.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 滚动 文字 </title> 
</head> 

<body> 

<marquee direction="up" loop="3"> 
<font color="#3300FF"” face=" 楷 体 GB2312"> 
你 好 ， 欢 迎 您 的 光临 <br> 

这 里 是 梦想 小 屋 <br> 

让 我 们 与 您 分 享 您 的 点 点 快乐 <br> 

让 我 们 与 您 分 担 您 的 片 片 忧 伤 <br> 
</font> 

</marquee> 

</body> 

</html> 


在 正 中 预览 网 页 效果 会 发 现 ， 当 文字 滚动 3 个 循环 之 后 ， 滚 动 文字 将 不 再 出 现 ， 如 图 6-14 
所 示 。 但 是 如 果 设 置 滚动 方式 为 交 蔡 滚动 ， 那 么 在 滚动 3 个 循环 之 后 ， 文 字 将 停留 在 窗口 
中 ， 如 图 6-15 所 示 。 
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戎 想 小 时 
让 我 们 与 您 分 享 您 的 点 点 快乐 
让 我 们 与 您 分 担 您 的 片上 忧伤 
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6-14 ”网 页 滚动 文字 的 循环 效果 1 6-15 ”网 页 滚动 文字 的 循环 效果 2 


6.5.7 ”案例 13 一 一 滚动 范围 属性 


如 果 不 设置 滚动 背景 的 面积 ， 那 么 默认 情况 下 ， 水 平 滚动 的 文字 背景 与 文字 同 高 、 与 浏 
览 器 窗口 同 宽 。 使 用 <marquee></marquee> 标 记 的 width 和 height 属性 可 以 调整 其 水 平和 垂直 
的 范围 。 其 语法 格式 如 下 。 

<marquee width= 背 景 宽 度 height= 背 景 高 度 > 滚动 文字 </marquee> 


N 此 处 设置 宽度 和 高 度 的 单位 均 为 像素 。 
NM 【 例 6.13】 设 置 网 页 文字 的 滚动 范围 (实例 文件 ，ch06\6.13.htmlD) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 深 动 文字 </title> 

</head> 

<body> 

<marquee behavior =" alternate" bgcolor="#99CCFF"> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 

</marquee><br><br> 

<marquee behavior="alternate"bgcolor="#99CCFF" width=500 
height=50> 

这 里 是 梦幻 小 屋 ， 欢 迎 光临 

</marquee> 

</body> 

</html> 


在 正中 预览 的 效果 如 图 6-16 所 示 ， 可 以 看 到 两 段 滚 动 文字 的 背景 高 度 和 宽度 的 变化 。 


























6-16 ”网 页 文字 的 滚动 范围 


信人 1 





6.5.8 ”案例 14 一 一 滚动 背景 颜色 属性 


<marquee></marquee> 标 记 的 bgcolor 属性 用 于 设置 内 容 滚 动 背景 色 (类 似 于 body 的 背景 
色 设 置 )。 其 语法 格式 如 下 。 
<marquee bgcolor=" 颜 色 代码 "> 滚动 文字 </marquee> 


文字 背景 颜色 设置 为 16 位 颜色 码 。 
【 例 6.14】 设 置 网 页 滚动 文字 的 背景 颜色 (实例 文件 : ch06\6.14.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee behavior ="alternate" bgcolor="#FFFF66"> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 

</marquee> 

<br><br> 

<marquee direction="up" bgcolor="#99CCFF"> 


你 好 ， 欢 迎 您 的 光临 <br> 





ph RE INL 人 























这 里 是 梦想 小 屋 <br> 
让 我 们 与 您 分 享 您 的 点 点 快乐 <br> 
让 我 们 与 您 分 担 您 的 片 片 忧 伤 <br> 
</marquee> 
</body> 
</html> 
在 正中 预览 的 效果 如 图 6-17 所 示 ， 在 滚动 文字 后 面 设置 了 淡 蓝 色 的 背景 。 
3 x 
文件 月 策 吉 日 ， 豆 看 收藏 庆 工具 (帮助 (H) 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 ~ 
6-17 ”网 页 滚动 文字 的 背景 颜色 
6.5.9 ”案例 15 一 一 滚动 空间 属性 





默认 情况 下 ， 滚 动 文字 周围 的 文字 或 图 像 是 与 滚动 背景 紧密 连接 的 ， 使 用 参数 hspace 和 
vspace 可 以 设置 它们 之 间 的 空白 空间 。 语 法 格式 如 下 。 
<marquee hspace= 水 平 范 围 vspace= 垂 直 范 围 > 滚 动 文字 </marquee> 


该 语法 中 水 平和 垂直 范围 的 单位 均 为 像素 。 
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【 例 6.1S】 设 置 网 页 文字 的 滚动 空间 (实例 文件 : ch06\6.15.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 深 动 文字 </title> 

</head> 

<body> 

不 设置 空白 空间 的 效果 : 

<marquee behavior ="alternate" bgcolor="#9999FF "> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 

</marquee> 

到 这 里 ， 留 下 你 的 忧伤 ， 带 走 我 的 快乐 ! 

<br> 

<hr color="#FF0000"> 

<br> 

设置 水 平 为 70 像素 、 垂 直 为 50 像素 的 空白 空间 : 
<marquee behavior ="alternate" bgcolor="#9999FF " hspace=70 vspace=50> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 

</marquee> 

我 的 梦想 与 你 同 在 ! 

</body> 

</html> 


在 正中 预览 的 网 页 效果 如 图 6-18 所 示 ， 可 以 看 到 设置 空白 空间 的 效果 。 
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文件 (F) 篇 齐 (E) 本 看 V) 收藏 夫 ( 科 工具 MT 大 助 HH) 
不 设置 定 白 宁 间 的 效 只， 

这 证 ， 贸 下 从 的 代价 ， 涡 直入 的 作 








设置 水 平 为 70 像素 、 垂直 为 50 像素 的 空白 空间 ， 


我 的 梦想 与 你 同 在 
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6-18 ”网 页 文字 的 滚动 空间 效果 


6.6 高 手 甜 点 
甜点 1: 在 HTML 5 网 页 中 添加 所 支持 格式 的 视频 ， 不 能 在 Firefox 8.0 浏览 器 中 正常 播 
放 ， 为 什么 ? 


目前 ，HTML 5 的 <video> 标 记 对 视频 的 支持 不 仅 有 视频 格式 的 限制 ， 还 有 对 解码 器 的 限 
制 。 规 定 如 下 。 
@ ”如 果 视 频 是 OGG 格式 的 文件 ， 则 需要 带 有 Theora 视频 编码 和 Vorbis 音频 编码 。 


二 
全 114 


® ”如果 视频 是 MP4 格式 的 文件 ， 则 需要 带 有 H.264 视频 编码 和 AAC 音频 编码 。 
”如果 视 频 是 WebM 格式 的 文件 ， 则 需要 带 有 VP8 视频 编码 和 Vorbis 音频 编码 。 


甜点 2: 在 HIML 5 网 页 中 添加 MP4 格式 的 视频 文件 ， 为 什么 在 不 同 的 浏览 器 中 视频 控 

件 显示 的 外 观 不 同 ? 

在 HIML 5 中 规定 用 controls 属性 来 设置 视频 文件 的 播放 、 暂 停 、 停 止 和 调节 音量 的 操 
作 。controls 是 一 个 布尔 属性 ， 所 以 可 以 赋予 任何 值 。 一 旦 添加 了 此 属性 ， 等 于 告诉 浏览 器 需 
要 显示 播放 控件 并 允许 用 户 操作 。 因 为 每 一 个 浏览 器 都 负责 内 置 视频 控件 的 外 观 ， 所 以 在 不 
同 的 浏览 器 中 将 显示 不 同 的 视频 控件 外 观 。 


6.7” 跟 我 练 练 手 


练习 1: 添加 网 页 音频 文件 。 
练习 2: 添加 网 页 视频 文件 。 
练习 3: 添加 网 页 滚动 文字 。 
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使 用 HTML 5 © 
绘制 图 形 ¢ 


HTML 5 呈现 了 很 多 的 新 特性 ， 这 在 之 前 的 HTML 中 是 不 可 能 见 到 的 。 其 中 一 
anvas ba 5 


个 最 值得 提 及 的 特性 就 是 HIML e ， 可 以 对 2D 或 位 图 进行 动态 、 肢 本 的 演 
染 。canvas 是 一 个 短 形 区 域 ， 使 用 JavaScript 可 以 控制 其 每 一 个 像素 。 
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7.1 什么 是 canvas 


canvas 是 一 个 新 的 HTML 元 素 ， 这 个 元 素 可 以 被 Script 语言 (通常 是 JavaScripb 用 来 绘制 
图 形 。 例 如 ， 可 以 用 它 来 画图 、 合 成 图 像 或 做 简单 的 动画 。 

HTML 5 的 canvas 标记 是 一 个 矩形 区 域 ， 包 含 两 个 属性 width 和 height， 分 别 表示 矩形 区 
域 的 宽度 和 高 度 。 这 两 个 属性 都 是 可 选 的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300px 





和 150px。 
canvas 在 网 页 中 的 常用 形式 如 下 。 
<canvas id="myCanvas" width="300" height="200" style="border:lpx solid 
#c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 


上 面 的 示例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表示 宽度 和 高 度 ， 最 初 的 
画布 是 不 可 见 的 ， 此 处 为 了 观察 这 个 矩形 区 域 ， 这 里 使 用 CSS 样式 ， 即 style 属性 。style 表 
示 画 布 的 样式 。 如 果 浏 览 器 不 支持 画布 标记 ， 会 显示 画布 中 间 的 提示 信息 。 

画布 canvas 本 身 不 具有 绘制 图 形 的 功能 ， 只 是 一 个 容器 。 如 果 读 者 对 于 Java 语言 非常 了 
解 ， 就 会 发 现 HTML 5 的 画布 和 Java 中 的 Panel 面板 非常 相似 ， 都 可 以 在 容器 中 绘制 图 形 。 
既然 canvas 画布 元 素 放 好 了 ， 就 可 以 使 用 脚本 语言 JavaScript 在 网 页 上 绘制 图 像 。 

使 用 canvas 结合 JavaScript 绘制 图 形 ， 一 般 情况 下 需要 下 面 几 个 步 又 。 

EDp JavaScript 使 用 id 来 寻找 canvas 元 素 ， 即 获取 当前 画布 对 象 。 


Var c=document .getElementById("myCanvas"); 


EEIPp 创建 context 对 象 ， 代 码 如 下 。 


Var cxt=c.getContext ("2d"); 


getContext 方法 返回 一 个 指定 contextId 的 上 下 文 对 象 ， 如 果 指 定 的 id 不 被 支持 ， 则 返回 
null。 当 前 被 强制 必须 支持 的 对 象 是 24， 也 许 在 将 来 会 有 3d， 注 意 ， 指 定 的 id 是 大 小 写 敏感 
的 。 对 象 cxt 建立 之 后 ， 就 可 以 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 
基 了 TB 绘制 图 形 ， 代 码 如 下 。 
cxt .fillstyle="#FF0000"; 
cxt.fillRect (0,0,150,75); 
fillStyle 方法 将 其 染 成 红色 ，fillRect 方法 规定 了 形状 、 位 置 和 尺寸 。 这 两 行 代码 绘制 一 
个 红色 的 矩形 。 





7.2 绘制 基本 形状 


画布 canvas 结合 JavaScript， 不 但 可 以 绘制 简单 的 矩形 ， 还 可 以 绘制 一 些 其 他 的 常见 图 
形 ， 如 矩形 、 直 线 、 圆 等 。 


Gi's 


7.2.1 案例 1 一 一 绘制 矩形 


单独 的 一 个 canvas 标记 只 是 在 页 面 中 定义 了 一 块 矩形 区 域 ， 并 无 特别 之 处 ， 开 发 人 员 只 
有 配合 使 用 JavaScript 脚本 ， 才 能 够 完成 各 种 图 形 、 线 条 ， 以 及 复杂 的 图 形变 换 操 作 。 与 基于 
SVG 来 实现 同样 的 绘图 效果 来 比较 ，canvas 绘图 是 一 种 像素 级 别 的 位 图 绘图 技术 ， 而 SVG 则 
是 一 种 矢量 绘图 技术 。 

使 用 canvas 和 JavaScript 绘制 一 个 矩形 ， 可 能 会 涉及 一 个 或 多 个 方法 ， 这 些 方法 如 表 7-1 





所 示 。 


方 法 
fillRectO 


strokeRect! 


clearRectO 





表 7-1 使 用 canvas 绘制 矩形 的 方法 
功 能 
绘制 一 个 矩形 ， 这 个 矩形 区 域 没有 边框 ， 只 有 填充 色 。 这 个 方法 有 4 个 参数 ， 前 2 个 
表示 左上 角 的 坐标 位 置 ， 第 3 个 参数 为 长 度 ， 第 4 个 参数 为 高 度 
该 方法 绘制 一 个 带 边框 的 矩形 。 该 方法 的 4 个 参数 的 解释 同上 
清除 一 个 矩形 区 域 ， 被 清除 的 区 域 将 没有 任何 线条 。 该 方法 的 4 个 参数 的 解释 同上 


【 例 7.1】 使 用 canvas 绘制 矩形 (实例 文件 : ch07\7.1.html) 


<!DOCTYPE html> 


<html> 
<body> 


<canvas id="myCanvas" width="300" height="200" style="border:lpx solid 


blue"> 


Your browser does not support the canvas element. 


</canvas> 


<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 
Var cxt=c.getContext ("2d"); 
cxt.fillstyle="rgb(0,0,200)"; 

cxt .fillRect (10,20,100,100); 


</script> 
</body> 
</html> 


上 面 代码 中 ， 首 先 定义 一 个 画布 对 象 ， 其 id 名 称 为 myCanvas， 其 高 度 和 宽度 分 别 为 200 
像素 和 300 像素 ， 并 定义 了 画布 边框 显示 样式 。 
在 JavaScript 代码 中 ， 首 先 获取 画布 对 象 ， 然 后 使 用 getContext() 方 法 获取 当前 2d 的 上 下 








文 对 象 ， 并 使 有 











flRectO 方 法 绘制 一 个 矩形 。 其 中 涉及 一 个 fnlStyle 属性 ， 用 于 设 定 填充 的 颜 


色 、 透 明度 等 ， 如 果 设 置 为 rgb(200.0.0) ， 则 表示 一 个 颜色 ， 不 透明 ; 如果 设 为 
rgba(0,0,200,0.5)， 则 表示 一 个 颜色 ， 透 明度 为 50%。 
在 正中 浏览 的 效果 如 图 7-1 所 示 ， 网 页 中 ， 在 一 个 蓝 色 边框 中 显示 了 一 个 蓝 色 和 拢 形 。 
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图 7-1 绘制 矩形 
7.2.2 ”案例 2 一 一 绘制 圆 形 


基于 canvas 的 绘图 并 不 是 直接 在 canvas 标记 所 创建 的 绘图 画面 上 进行 各 种 绘图 操作 ， 而 
是 依赖 画面 所 提供 的 泻 染 上 下 文 (Rendering Contexb， 所 有 的 绘图 命令 和 属性 都 定义 在 泻 染 上 
下 文 当 中 。 在 通过 canvas id 获取 相应 的 DOM 对 象 之 后 ， 首先 要 做 的 事情 就 是 获取 演 染 上 FF 
文 对 象 。 泻 染 上 下 文 与 canvas 一 一 对 应 ， 无 论 对 同一 canvas 对 象 调用 几 次 getContext0 方 
法 ， 都 将 返回 同一 个 上 下 文 对 象 。 
在 画布 中 绘制 圆 形 ， 可 能 要 涉及 下 面 几 个 方法 ， 如 表 7-2 所 示 。 
表 7-2 使 用 canvas 绘制 圆 形 的 方法 





方 法 功 能 
beginPath() 开始 绘制 路 径 
arc(x,y,radius,startAngle, x 和 y 定义 的 是 圆 的 原点 ，radius 是 圆 的 半径 ，startAngle 和 endAngle 是 
endAngle.anticlockwise) 弧度 ， 不 是 度数 ，anticlockwise 是 用 来 定义 画 圆 的 方向 ， 值 是 true 或 false 
closePath 结束 路 径 的 绘制 
fill 进行 填充 
stroke| 设置 边框 


路 径 是 绘制 自 定义 图 形 的 好 方法 ， 在 canvas 中 通过 beginPath() 方 法 开始 绘制 路 径 ， 这 个 
时 候 就 可 以 绘制 直线 、 曲 线 等 ， 绘 制 完 成 后 调用 fill0 和 stroke0 方 法 完成 填充 并 设置 边框 ， 通 
过 closePath0 方 法 结束 路 径 的 绘制 。 

【 例 7.2】 使 用 canvas 绘制 圆 形 (实例 文件 : ch07\7.2.htmD) 


<1DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 


CxXtL.-fil1StYy1le="#EFEFaa00"7 
cxt.beginpath(); 
cxt.arc(70;18,15,0,Math.PI*2,true)? 
cxt.closepath(); 

ee 

</acript> 

</body> 

</html> 


在 上 面 的 JavaScript 代码 中 ， 使 用 beginPath0) 方 法 开启 一 个 路 径 ， 然 后 绘制 一 个 圆 形 ， 最 
后 关闭 这 个 路 径 并 填充 。 
在 正中 浏览 的 效果 如 图 7-2 所 示 ， 网 页 中 ， 在 矩形 边框 中 显示 了 一 个 黄色 的 圆 。 
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图 7-2 绘制 圆 形 
7.2.3 ”案例 3 一 一 使 用 moveTo 与 lineTo 绘制 直线 


在 每 个 canvas 实例 对 象 中 都 拥有 一 个 path 对 象 ， 创 建 自 定义 图 形 的 过 程 就 是 不 断 对 path 
对 象 操作 的 过 程 。 每 当 开始 一 次 新 的 图 形 绘制 任务 时 ， 都 需要 先 使 用 beginPath() 方 法 来 重 置 
path 对 象 至 初始 状态 ， 进 而 通过 一 系列 对 moveTo/lineTo 等 画 线 方法 的 调用 ， 绘 制 期 望 的 路 
径 ， 其 中 moveTo(x,y) 方 法 设置 绘图 起 始 坐标 ， 而 lineTo(x,y) 等 画 线 方法 可 以 从 当前 起 点 绘制 
直线 、 圆 弧 以 及 曲线 到 目标 位 置 。 最 后 一 步 ， 也 是 可 选 的 步骤， 是 调用 closePath() 方 法 将 自 定 
义 图 形 进行 闭合 ， 该 方法 将 自动 创建 一 条 从 当前 坐标 到 起 始 坐标 的 直线 。 

绘制 直线 常用 的 方法 是 moveTo0 和 lineTo0， 其 含义 如 表 7-3 所 示 。 

表 7-3 ”使 用 canvas 绘制 直线 的 方法 


方法 或 属性 功 能 

















moveTo(x.y) | 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 (x.y)， 并 作为 线条 开始 点 
绘制 线条 到 指定 的 目标 坐标 (x.y)， 并 且 在 两 个 坐标 之 间 画 一 条 直线 。 不 管 调用 它们 
lineTo(x,y) 哪 一 个 ， 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke( 绘 制 ) 和 fill( 填 充 ) 函 数 。 当 
前 ， 只 是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 
strokeStyle | 指定 线条 的 颜色 
lineWidth 设置 线条 的 粗细 
【 例 7.3】 使 用 moveTo0 与 lineTo0 方 法 绘制 直线 (实例 文件 : ch07\7.3.htmD 
<!IDOCTYPE html> 
<html> 
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<body> 

<canvas id="myCanvas" width="200" height="200" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 


<script type="text/javascript"> 
Var c=document .getElementById("myCanvas"); 
Var cxt=c.getContext ("2d"); 
cxt.beginPpath(); 
cxt.strokeSstyle="rgb(0,182,0)"; 
cxt.moveTo(10,10); 
cxt.lineTo(150,50); 
cxt.lineTo(10,50); 
cxt.lineWidth=14; 

cxt.stroke(); 

cxt.closePath(); 

</script> 

</body> 

</html> 


上 面 代码 中 ， 使 用 moveTo0 方 法 定义 一 个 坐标 位 置 为 (10,10)， 以 此 坐标 位 置 为 起 点 绘制 
了 两 个 不 同 的 直线 ， 并 使 用 lineWidth 设置 直线 的 宽度 ， 使 用 strokeStyle 设置 直线 的 颜色 ， 使 
用 lineTo 设置 两 个 不 同 直线 的 结束 位 置 。 

在 正 中 浏览 的 效果 如 图 7-3 所 示 ， 可 以 看 到 网 页 中 绘制 了 两 个 直线 ， 这 两 个 直线 在 某 一 
点 交叉 。 
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图 7-3 绘制 直线 
7.2.4 ”案例 4 一 一 使 用 bezierCurveTo 绘制 贝 塞 尔 曲 线 


在 数学 的 数值 分 析 领 域 中 ， 贝 塞 尔 曲 线 (Bézier 曲线 ) 是 计算 机 图 形 学 中 相当 重要 的 参数 曲 
线 。 更 高 维度 的 广泛 化 贝 塞 尔 曲线 就 称 作 贝 塞 尔 曲 面 ， 其 中 贝 塞 尔 三 角 是 一 种 特殊 的 实例 。 

bezierCurveTo0 表 示 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 塞 尔 曲 线 。 这 条 曲线 的 开始 
点 是 画布 的 当前 点 ， 而 结束 点 是 (x,y)。 两 条 贝 塞 尔 曲 线 控制 点 (cpX1.cpY1) 和 (cpX2, cpY2) 定 义 
了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x,y)。 

方法 bezierCurveTo0 上 有 具体 格式 如 下 站 


bezierCurveTo(cpXl, cpYl, cpX2, cpY2, x: Y) 


信人 2 


其 参数 的 含义 如 表 7-4 所 示 。 


表 7-4 bezierCurveTo() 方 法 的 参数 含义 











cpX1, cpY!1 和 曲线 的 开始 点 (当前 位 置 ) 相 关联 的 控制 点 的 坐标 
cpX2, cpY2 结束 点 相关 联 的 控制 点 的 坐标 



























【 例 7.4】 使 用 bezierCurveTo0 方 法 绘制 贝 塞 尔 曲 线 (实例 文件 ，ch07\7.4.html) 


<!DOCTYPE html> 


<html> 

<head> 

<title> 贝 塞 尔 曲线 </title> 
<script> 


function drawl(id) 
{ 
Var canvas=document .getElementById(id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext('2d'); 
context .fillSstyle="#eeeeff"; 
context.fillRect(0,0,400,300); 
var n=0; 
var dx=150; 
var dy=150; 
var s=100; 
context .beginPath (); 
context .globalCompositeOperation='and'; 
context.fillstyle='rgb(100,255,100)"'; 
context.strokestyle='rgb(0,0,100)"'; 
Var x=Math.sin(0); 
Var y=Math.cos (0) 7 
Var dig=Math.PI/15*11; 
for (var i=0;i<30;i++) 
{ 
var x=Math.sin(i*dig); 
var y=Math.cos (i*dig); 
Context .bezierCurveTo (dx+x*s, dy+y*s—-100, dx+x*s+100, dyty*s, 
dxt+x*s, dyty*s); 
3 
context.closePath(); 
context .fill(); 
context .stroke () ; 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 绘 制 元 素 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 
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上 面 函 数 draw0 的 函数 中 ， 首 先 使 用 语句 flIRect(0.0,400,300) 绘 制 了 一 个 和 矩形， 其 大 小 和 
画布 相同 ， 其 填充 颜色 为 浅 青色 。 然 后 定义 几 个 变量 ， 用 于 设 定 曲线 的 坐标 位 置 ， 在 for 循环 
中 使 用 bezierCurveTo0 方 法 绘制 贝 塞 尔 曲 线 。 

在 正中 浏览 的 效果 如 图 7-4 所 示 ， 可 以 看 到 网 页 中 显示 了 一 个 贝 塞 尔 曲线 。 
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图 7-4 贝 塞 尔 曲线 


7.3 绘制 渐变 图 形 


渐变 是 两 种 或 更 多 颜色 的 平滑 过 渡 ， 是 指 在 颜色 集 上 使 用 逐步 抽样 算法 ， 并 将 结果 应 用 
于 描 边 样式 和 填充 样式 中 。canvas 的 绘图 上 下 文 支持 两 种 类 型 的 渐变 : 线性 渐变 和 放射 性 渐 


变 ， 其 中 放射 性 渐变 也 称 为 径 向 渐变 。 


7.3.1 案例 5 一 一 绘制 线性 渐变 
创建 一 个 简单 的 渐变 非常 容易 ， 可 能 比 使 用 Photoshop 还 要 快 。 使 用 渐变 需要 以 下 3 个 


ET 创建 渐变 对 象 ， 代 码 如 下 。 
Var gradient=cxt.createLinearGradient (0,0,0,canvas.height); 
EY 为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方式 ， 代 码 如 下 。 


gradient .addColorStop (0, '#fff"'); 
gradient.addColorStop (1, '#000°'); 


在 context 上 为 填充 样式 或 者 描 边 样式 设置 渐变 ， 代 码 如 下 。 

cxt.fillstyle=gradient; 

要 设置 显示 颜色 ， 在 渐变 对 象 上 使 用 addColorStop0 函 数 即 可 。 除 了 可 以 变换 成 其 他 颜色 
外 ， 还 可 以 为 颜色 设置 alpha 值 (如 透明 )， 并 且 alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 的 效 
果 ， 需 要 使 用 颜色 值 的 另 一 种 表示 方法 ， 如 内 置 alpha 组 件 的 CSSrgba0 函 数 。 

绘制 线性 渐变 ， 会 使 用 到 下 面 几 个 方法 ， 如 表 7-5 所 示 。 
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表 7-5 ”绘制 线性 渐变 的 方法 
功 


能 





addColorStop 


望 在 偏 移 位 置 描 边 或 填充 时 所 使 用 


函数 允许 指定 两 个 参数 :颜色 和 偏 移 量 。 颜 色 参 数 是 指 开发 人 员 希 





的 颜色 。 偏 移 量 是 一 个 0.0 一 1.0 


数值 ， 代 表 沿 着 渐变 线 渐变 的 距离 有 多 远 





createLinearGIadient(X0.y0.X1.X1 





【 例 7.5】 绘 制 线性 渐变 图 形 ( 实 例文 件 : ch07\7.5.html) 


<!DOCTYPE html> 


<html> 
<head> 


<title> 线 性 渐变 </title> 


</head> 
<body> 


<h1> 绘 制 线性 渐变 </h1> 


<canvas id="canvas" width="400" height="300" style="border:lpx solid red"/> 


<script type="text/javascript"> 

Var c=document .getElementById("canvas"); 
Var cxt=c.getContext ("2d"); 

Var gradient=cxt.createLinearGradient (0,0,0,canvas.height); 
gradient.addColorSstop (0, '#fff"'); 
gradient.addColorSstop (1, '#000°'); 
cxt.fillstyle=gradient; 
cxt.fillRect (0,0,400,400); 


</script> 
</body> 
</html> 


上 面 的 代码 使 用 2D 环境 对 象 产 生 了 一 个 线性 渐变 对 象 ， 渐 变 的 起 始点 是 (0.0)， 渐 变 的 结 
束 点 是 (0,canvas.heighb)， 然 后 使 用 addColorStop0 函 数 设置 渐变 颜色 ， 最 后 将 渐变 填充 到 上 下 


文 环境 的 样式 中 。 


在 正 中 浏览 的 效果 如 图 7-5 所 示 ， 可 以 看 到 网 页 中 创建 了 一 个 垂直 方向 上 的 渐变 ， 从 上 


到 下 颜色 逐渐 变 深 。 








沿 着 直线 从 (x0,y0) 至 (x1.y1) 绘 制 渐变 
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图 7-5 线性 渐变 
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7.3.2 ”案例 6 一 一 绘制 径 向 渐变 


除了 线性 渐变 以 外 ，HTML 5 Canvas API 还 支持 放射 性 渐变 。 所 谓 放 射 性 渐变 ， 就 是 颜 
色 会 介 于 两 个 指定 圆 间 的 锥 形 区 域 平 滑 变化 。 放 射 性 渐变 和 线性 渐变 使 用 的 颜色 终止 点 是 一 
样 的 。 如 果 要 实现 放射 线 渐变 ， 即 径 向 渐变 ， 需 要 使 用 方法 createRadialGradient()。 


createRadialGradient (x0,y0,r0,xl,yl,rl 


其 中 前 3 个 参数 代表 开始 的 贺 ， 圆 心 为 (x0.y0)， 半 径 为 0; 后 3 个 参数 代表 结束 的 圆 ， 
圆心 为 (x1,y1)， 半 径 为 r1。 
【 例 7.6】 绘 制 径 向 渐变 图 形 ( 实 例文 件 : ch07\7.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 径 向 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 径 向 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border:lpx solid red"/> 
<script type="text/javascript"> 

Var c=document .getElementById("canvas"); 

Var cxt=c.getContext ("2d"); 

Var gradient=cxt.createRadialGradient (canvas.width/2,canvas.height/2,0, 
canvas.width/2,canvas.height/2,150); 

gradient.addColorSstop (0, '#fff"'); 

gradient.addColorSstop (1, '#000°'); 

cxt .fillstyle=gradient; 

cxt.fillRect (0,0,400,400); 

</script> 

</body> 

</html> 


上 面 代码 中 ， 首 先 创 建 渐 变 对 象 gradient， 此 处 使 用 方法 createRadialGradientO 创 建 了 一 
个 径 向 渐变 ， 然 后 使 用 addColorStop0 添 加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环境 中 。 

在 正 中 浏览 的 效果 如 图 7-6 所 示 ， 可 以 看 到 网 页 中 从 圆 的 中 心 亮 点 开始 ， 向 外 逐步 发 
散 ， 形 成 了 一 个 径 向 渐变 。 
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图 7-6 径 向 渐变 
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7.4 绘制 变形 图 形 


画布 canvas 不 但 可 以 使 用 moveTo0 等 方法 来 移动 画笔 、 绘 制图 形 和 线条 ， 还 可 以 使 用 变 
换 方 法 来 调整 画笔 下 的 画布 ， 变 换 的 方法 包括 等 旋转 、 缩 放 、 变 形 和 平移 等 。 


7.4.1 案例 7 一 一 变换 原点 坐标 


平移 (translate)， 即 将 绘图 区 相对 于 当前 画布 的 左上 角 进行 平移 。 如 果 不 进行 变换 ， 绘 图 
区 原点 和 画布 原点 是 重 仅 的 ， 绘 图 区 相当 于 画图 软件 里 的 热 区 或 当前 层 。 如 果 进 行 变换 ， 则 
坐标 位 置 会 移动 到 一 个 新 位 置 。 

如 果 要 对 图 形 实 现 平 移 ， 需 要 使 用 方法 translate(x,y)， 该 方法 表示 在 平面 上 平移 ， 即 以 原 
来 的 原点 为 参考 ， 然 后 以 偏 移 后 的 位 置 作为 坐标 原点 。 也 就 是 说 ， 如 果 原 点 本 来 在 
(100,100)， 执 行 translate(1,1) 命 令 后 ， 新 的 坐标 原点 在 (101,101)， 注 意 不 是 (1,1)。 

【 例 7.7】 绘 制 变换 原点 坐标 的 图 形 (实例 文件 : ch07\7.7.html) 


<!DOCTYPE html> 
<html> 











<head> 
<title> 绘 制 坐标 变换 </title> 
<script> 
function draw(id) 
{ 
Var canvas=document .getElementById(id); 
if(canvas==null) 
return false; 
Var Context=canvas .getContext ('2d'); 
context.fillstyle="#eeeeff"; 
context.fillRect(0,0,400,300); 
context.translate(200,50); 
context .fillstyle='rgba(255,0,0,0.25)'; 
for (var i=0;i<50;i++){ 
Context .translate(25,25) 7 
Context .fillRect(0,0,100,50) 7 
i 
| 


</script> 

</head> 

<body onload="draw('canvas');"> 

<h1> 变 换 原点 坐标 </h1> 

<canvas id="canvas" width="400" height="300" /> 

</body> 

</html> 

在 draw0 函 数 中 ， 使 用 fillRect0 方 法 绘制 了 一 个 矩形 ， 然 后 使 用 translate() 方 法 平移 到 一 
个 新 位 置 ， 并 从 新 位 置 开始 使 用 for 循环 ， 连 续 移 动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 


在 正中 浏览 的 效果 如 图 7-7 所 示 ， 可 以 看 到 网 页 中 从 坐标 位 置 (200.50) 开 始 绘制 矩形 ， 并 
且 每 次 以 指定 的 平移 距离 绘制 矩形 。 
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图 7-7 变换 坐标 原点 
7.4.2 ”案例 8 一 一 图 形 缩放 


对 于 变形 图 形 来 说 ， 其 中 最 常用 的 方式 就 是 对 图 形 进行 缩放 ， 即 以 原来 的 图 形 为 参考 ， 
放大 或 者 缩小 图 形 ， 从 而 增加 效果 。 

如 果 要 实现 图 形 缩放 ， 需 要 使 scale(x,y) 函 数 ， 该 函数 带 有 两 个 参数 ， 分 别 代表 在 x、y 两 
个 方向 上 的 值 。 在 canvas 显示 图 像 的 时 候 ， 每 个 参数 向 其 传递 在 本 方向 轴 上 图 像 要 放大 (或 者 
缩小 ) 的 量 。 如 果 x 值 为 2， 就 代表 所 绘制 图 像 中 全 部 元 素 都 会 变 成 两 倍 宽 。 如 果 y 值 为 0.5， 
则 绘制 出 来 的 图 像 全 部 元 素 都 会 变 成 之 前 的 一 半 高 。 

【 例 7.8】 缩 放 图 形 (实例 文件 : ch07\7.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 形 缩放 </title> 
<script> 
function draw(id) 
{ 
var canvas=document .getElementById(id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext('2d'); 
context.fillSstyle="#eeeeff"; 
context .fillRect(0,0,400,300); 
context.translate (200,50); 
context .fillstyle='rgba(255,0,0,0.25)'; 
for (Var i=0;i<50;i++){ 
context.scale(3,0.5); 
context .fillRect (0,0,100,50); 





» 
} 

</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 形 缩放 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 
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上 面 代码 中 ， 实 现 缩放 操作 是 放 在 for 循环 中 完成 的 ， 在 此 循环 中 ， 以 原来 的 图 形 为 参考 
物 ， 使 其 在 义 轴 方向 增加 3 倍 宽 ，y 轴 方 向 上 变 为 原来 的 一 半 。 

在 正中 浏览 的 效果 如 图 7-8 所 示 ， 可 以 看 到 网 页 中 在 一 个 指定 方向 绘制 了 多 个 矩形 。 
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图 7-8 图 形 缩放 
7.4.3 ”案例 9 一 一 旋转 图 形 


变换 操作 并 不 限于 缩放 和 平移 ， 还 可 以 使 用 函数 contextrotate(angle) 来 旋转 图 像 ， 甚 至 可 
以 直接 修改 底层 变换 矩阵 以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 旋 转角 度 参数 angle 
以 弧度 为 单位 。 

rotate() 方 法 默认 地 从 左上 端的 (0.0) 开 始 旋转 ， 通 过 指定 一 个 角度 ， 改 变 画 布 坐标 和 ”Web 
浏览 器 中 的 <canvas> 元 素 的 像素 之 间 的 映射 ， 使 得 任意 后 续 绘图 在 画布 中 都 显示 为 旋转 的 ， 
但 并 没有 旋转 <canvas> 元 素 本 身 。 注 意 ， 这 个 角度 是 用 弧度 指定 的 。 

【 例 7.9】 旋 转 图 形 (实例 文件 : ch07\7.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 旋转 图 像 </title> 
<script> 

function draw(id) 


{ 
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var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillSstyle="#eeeeff"; 
context .fillRect(0,0,400,300); 
context.translate (200,50); 
context .fillstyle='rgba(255,0,0,0.25)'; 
for (var i=0;i<50;i++){ 
Context -rotate (Math.PI/10); 
Context .fillRect(0,0,100,50); 
) 
</script> 
</head> 
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<body onload="draw('canvas');"> 

<h1> 旋 转 图 形 </h1> 

<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


上 面 代码 中 ， 使 用 rotate0 方 法 在 for 循环 中 对 多 个 图 形 进行 旋转 ， 其 旋转 角度 相同 。 
在 正中 浏览 的 效果 如 图 7-9 所 示 ， 多 个 矩形 以 中 心 弧度 为 原点 进行 旋转 。 


四 
mn RE] HEV Cu) IAM 和 


旋转 图 形 


图 7-9 旋转 图 形 




















7.5 绘制 其 他 样式 的 图 形 


使 用 canvas 标记 的 其 他 属性 还 可 以 绘制 其 他 样式 的 图 形 ， 如 将 绘制 的 基本 形状 进行 组 
合 、 绘 制 带 有 阴影 的 图 形 、 绘 制 文字 等 。 本 章节 将 讲述 绘制 这 些 样式 图 形 的 方法 和 技巧 。 


7.5.1 案例 10 一 一 图 形 组 合 


在 前 面 介绍 的 知识 里 ， 可 以 将 一 个 图 形 画 在 另 一 个 图 形 之 上 ， 大 多 数 情 况 下 这 样 是 不 够 
的 。 例 如 ， 这 样 受制 于 图 形 的 绘制 顺序 ， 但 是 可 以 利用 globalCompositeOperation 属性 来 改变 
这 些 做 法 ， 这 样 不 仅 可 以 在 已 有 图 形 后 面 再 画 新 图 形 ， 还 可 以 用 来 遮盖 、 清 除 ( 比 clearRectO 
方法 强劲 得 多 ) 某 些 区 域 。 

其 语法 格式 如 下 。 

globalCompositeOperation = type 

表示 设置 不 同形 状 的 组 合 类 型 ， 其 中 type 表示 方 的 图 形 是 已 经 存在 的 canvas 内 容 ， 其 默 
认 值 为 source-over， 表 示 在 canvas 内 容 上 画 新 的 形状 。 

属性 值 ype 具有 12 个 含义 ， 其 具体 含义 如 表 7-6 所 示 。 


表 7-6 属性 值 type 的 含义 





属性 值 说 明 
source-Over 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 








会 在 原 有 内 容 之 下 绘制 新 图 形 


destination-over 


可 

















第 

续 表 过 

章 

属性 值 说 明 使 
source-in 新 图 形 仅 会 保留 与 原 有 内 容重 合 的 部 分 ， 其 他 区 域 都 变 成 透明 的 用 
destination-in 原 有 内 容 中 与 新 图 形 重合 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 E 
source-out 只 有 新 图 形 中 与 原 有 内 容 不 重合 的 部 分 会 被 绘制 出 来 | 
destination-out 原 有 内 容 中 与 新 图 形 不 重合 的 部 分 会 被 保留 S 
source-atop 新 图 形 中 与 原 有 内 容重 三 的 部 分 会 被 绘制 ， 并 覆盖 于 原 有 内 容 之 上 是 





原 有 内 容 中 与 新 内 容重 县 的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 


destination-atop 














lighter 两 图 形 中 重合 部 分 作 加 色 处 理 

darker 两 图 形 中 重合 的 部 分 作 减 色 处 理 

XOT 重合 的 部 分 会 变 成 透明 

co 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


【 例 7.10】 图 形 组 合 (实例 文件 :ch07\7.10.htmD 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 形 组 合 </title> 
<script> 
function draw(id) 
{ 
var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
Var oprtns=new Arrayl( 
"source-atop", 
"source-in", 
"source-out", 
"source-over", 
"destination-atop", 
"destination-in", 
"destination-out", 
"destination-over", 
"lighter", 
"copy", 
TE 


GG 


); 

var i=10; 
context .fillstyle="blue"; 
context.fillRect(10,10,60,60); 
context .globalCompositeOperation=oprtns [i]; 
context .beginpath(); 
context .fillstyle="red"; 
context.arc(60,60,30,0,Math.PI*2,false); 
context .fil11(); 

} 

</script> 
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</head> 

<body onload="draw('canvas');"> 
<h1> 图 形 组 合 </h1> 

<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


在 上 面 的 代码 中 ， 首 先 创建 了 一 个 oprtns 数组 ， 用 于 存储 type 的 11 个 值 ， 然 后 绘制 一 个 
矩形 ， 并 使 用 content 上 下 文 对 象 设置 图 形 的 组 合 方式 ， 最 后 使 用 arc() 方 法 绘制 了 一 个 圆 。 
在 正 中 浏览 的 效果 如 图 7-10 所 示 ， 在 页 面 上 绘制 了 一 个 矩形 和 圆 ， 但 矩形 和 圆 重 车 的 











地 方 以 空白 显示 。 
EL *[ |] 
ER 
图 形 组 合 站 








7-10 图 形 组 合 


7.5.2 ”案例 11 一 一 绘制 带 阴 影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非常 简单 ， 只 需要 设置 几 个 属性 即 可 。 这 几 个 
属性 分 别 为 shadowOffsetX 、shadowOffsetY 、shadowBlur 和 shadowColor 。 其 中 属性 
shadowColor 表示 阴影 颜色 ， 值 和 CSS 颜色 值 一 致 。shadowBlur 表示 设置 阴影 模糊 程度 ， 此 
值 越 大 ， 阴 影 越 模糊 。shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 的 x 和 y 偏 移 量 ， 单 位 
是 像素 。 

【 例 7.11】 绘制 带 阴 影 的 图 形 ( 实 例文 件 ，ch07\7.11.html) 


<!DOCTYPE html> 
<html> 


<head> 
<title> 绘 制 阴影 效果 图 形 </title> 
</head> 
<body> 
<canvas id="my canvas" width="200" height="200" style="border:lpx solid 
#f£f0000"></canvas> 
<script type="text/javascript"> 
Var elem = document .getElementById("my canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext ("2d"); 
//shadowOffsetx 和 shadowOffsetY: 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 
Context .shadowOffsetX = 15; 
Context -shadowOffsetY = 15; 
//shadowBlur: 设置 阴影 模糊 程度 。 此 值 越 大 ， 阴 影 越 模糊 
// 其 效果 和 Photoshop 人 人 本 
context .shadowBlur = 


//shadowColor: 阴影 颜色 。 其 值 和 Css 颜色 值 一 致 


信人 22 


第 
ycontext-shadowcolor = "rgba(255, 0, 0, 0.5)"™» ~ 
// 或 下 面 的 十 六 进 制 的 表示 方法 章 

context .shadowColor = '#f00"'; 
context .fillstyle = "#00f"'; 使 
Context .fillRect (20, 20, 150, 100); 
} = 
</script> 局 
</body> oO 
</html> 条 
在 下 中 浏览 的 效果 如 图 7-11 所 示 ， 在 页 面 上 显示 了 一 个 蓝 色 矩 形 ， 其 阴影 为 红色 矩形 。 
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图 7-11 带 有 阴影 的 图 形 
7.5.3 ”案例 12 一 一 绘制 文字 


用 户 不 仅 可 以 在 画布 上 绘制 路 径 对 象 ， 还 可 以 ， 通 过 描绘 文本 轮廓 和 填充 文本 内 容 来 绘 
制 文字 ， 同 时 ， 还 可 以 为 文字 添加 变换 效果 和 样式 。 
文本 绘制 功能 由 两 个 方法 组 成 ， 如 表 7-7 所 示 。 


表 7-7 绘制 文字 的 方法 














IGG 


说 _ 明 
绘制 带 fillstyle 填充 的 文字 、 文 本 参数 以 及 用 于 指定 文本 位 置 的 坐标 
参数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 其 会 将 文本 字体 强 
制 收缩 到 指定 尺寸 
绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 和 上 一 个 方法 相同 
该 函数 会 返回 一 个 度量 对 象 ， 其 包含 了 在 当前 context 环境 下 指定 文 
本 的 实际 显示 宽度 


为 了 保证 文本 在 各 浏览 器 下 都 能 正常 显示 ， 在 绘制 上 下 文 里 有 以 下 字体 属性 。 

@ font 可 以 是 CSS 字体 规则 中 的 任何 值 ， 包 括 字体 样式 、 字 体 变种 、 字 体 大 小 与 粗 
细 、 行 高 和 字体 名 称 。 

e@ textAlign 控制 文本 的 对 齐 方式 ， 类 似 于 (但 不 完全 相同 )CSS 中 的 text-align。 可 能 的 
取 值 为 start、end、left、right、 和 center。 

®@ textBaseline 控制 文本 相对 于 起 点 的 位 置 。 可 以 取 的 值 有 top、hanging、middle、 
alphabetic 、ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 地 使 用 top、 
middle 或 bottom 作为 文本 基线 。 


fillText(text.x,y.maxwidth) 


trokeText(text.x,y,.maxwidth) 





measureText 
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【 例 7.12】 绘 制 文字 (实例 文件 : ch07\7.12.htmD 


<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas id="my canvas" width="200" height="200" style="border:lpx solid 
#f££f0000"></canvas> 
<script type="text/javascript"> 
Var elem = document .getElementById("my canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext ("2d"); 
context .fillstyle = "#00f'; 
//font: 文字 字体 ， 同 cssfont-family 属性 
context .font = 'italic 30px 微软 雅 黑 ' 7 // 和 斜体 30 像素 微软 雅 黑 字 体 
//textAlign: 文字 水 平 对 齐 方式 。 可 取 属 性 值 : start, end, left,right, 
//center。 默 认 值 :start 
Context .textRlign = 'left'; 
// 文 字 竖 直 对 齐 方式 。 可 取 属 性 值 : top，hanging, middle,alphabetic, 
//ideographic，bottom。 默 认 值 : alphabetic 
Context .textBaseline = 'top'; 
// 要 输出 的 文字 内 容 ， 文 字 位 置 坐标 ， 第 4 个 参数 为 可 选 选 项 一 一 最 大 宽度 。 
// 如 果 需 要 的 话 ， 浏 览 器 会 缩减 文字 以 适应 指定 宽度 
context.fillText (" 祖 国生 日 快乐 !'，0，0,50); ”// 有 填充 
Context .font = 'bold 30px sans-serif'; 


context .strokeText (' 祖 国生 日 快乐 !'，0，50,100); // 只 有 文字 边框 





lL 
</script> 
</body> 
</html> 


在 下 中 浏览 的 效果 如 图 7-12 所 示 ， 在 页 面 上 显示 了 一 个 画布 边框 ， 画 布 中 显示 了 两 个 
不 同 的 字符 串 ， 第 一 个 字符 串 以 斜体 显示 ， 其 颜色 为 蓝 色 ; 第 二 个 字符 串 字 体 颜色 为 浅 黑 
色 ， 加 粗 显示 。 


文件 (F) 。 蝙 编 (EF) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

















导 100% ~ 








7-12 ”绘制 文字 


7.6 使 用 图 像 


画布 canvas 有 一 项 功能 就 是 引入 图 像 ， 可 以 用 于 图 片 合成 或 者 制作 背景 等 ， 但 目前 仅 可 
以 在 图 像 中 加 入 文字 。PNG，GIF，JPEG 等 格式 的 图 像 都 可 以 引入 到 canvas 中 ， 而 且 其 他 的 
canvas 元 素 也 可 以 作为 图 像 的 来 源 。 


7.6.1 案例 13 一 一 绘制 图 像 


要 在 画布 canvas 上 绘制 图 像 ， 需 要 先 有 一 个 图 片 。 这 个 图 片 可 以 是 已 经 存在 的 <img> 元 
素 ， 或 者 通过 JavaScript 创建 。 无 论 采 用 哪 种 方式 ， 都 需要 在 绘制 canvas 之 前 完全 加 载 这 张 
图 片 。 浏 览 器 通常 会 在 页 面 脚本 执行 的 同时 异步 加 载 图 片 。 如 果 视 图 在 图 片 未 完全 加 载 之 前 
就 将 其 呈现 到 canvas 上 ， 那 么 canvas 将 不 会 显示 任何 图 片 。 

捕获 和 绘制 图 形 完 全 是 通过 drawImage0 方 法 完成 的 ， 其 可 以 接收 不 同 的 HTML 参数 ， 具 
体 含 义 如 表 7-8 所 示 。 


表 7-8 绘制 图 像 的 方法 


方 法 说 明 
| 接受 一 个 图 片 ， 并 将 其 画 到 canvas 中 。 给 出 的 坐标 (dx,dy) 代 表 图 
drawImage(image,dx,dy) 
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片 的 左上 角 。 例 如 ， 坐 标 (0.0) 将 把 图 片 画 到 canvas 的 左上 角 
接受 一 个 图 片 ， 将 其 缩放 为 宽度 dw 和 高 度 dh， 然 后 把 它 画 到 
canvas 上 的 (dx.dy) 位 置 。 

接受 一 个 图 片 ， 通 过 参数 (sx.sy.sw.sb) 指 定 图 片 裁剪 的 范围 ， 缩 
放 到 (dw,dh) 的 大 小 ， 最 后 把 它 画 到 canvas 上 的 (dx.dy) 位 置 


【 例 7.13】 绘 制图 像 ( 实 例文 件 ，ch07\7.13.html) 


<!DOCTYPE html> 


drawImage(image,dx,dy,dw,dh) 


drawImage(image,sx,sy,sw,sh.dx,dy,dw.dh) 





<html> 
<head><title> 绘 制图 像 </title></head> 
<body> 


<canvas id="canvas" width="300" height="200" style="border:lpx solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
window.onload=function(){ 
Var ctx=document .getElementById("canvas") .getContext ("2d"); 
Var img=new Image(); 
img.src="01 .jpg"; 
img.onload=function(){ 
ctx.drawImage (img,0,0); 
} 
</script> 
</body> 
</html> 
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在 上 面 代码 中 ， 使 用 窗口 的 onload 加 载 事 件 ， 即 页 面 被 加 载 时 执行 函数 。 在 函数 中 ， 创 


建 上 下 文 对 象 ctx， 并 创建 Image 对 象 img; 然后 使 用 img 对 象 的 属性 src 设置 图 片 来 源 ， 最 
后 使 用 drawImage 方法 画 出 当前 的 图 像 。 


在 正中 浏览 的 效果 如 图 7-13 所 示 ， 在 页 面 上 绘制 了 一 个 图 像 ， 并 在 画布 中 显示 。 




















图 7-13 绘制 图 像 


7.6.2 ”案例 14 一 一 图 像 平 铺 





使 用 画布 canvas 绘制 图 像 有 很 多 种 用 处 ， 其 中 一 个 用 处 就 是 将 绘制 的 图 像 作 为 背景 图 片 








使 








和 。 在 做 背景 图 片 时 ， 如 果 显 示 图 片 的 区 域 大 小 不 能 直接 设 定 ， 通 常 将 图 片 以 平 铺 的 方式 





显示 。 


HTML 5 canvas API 支持 图 片 平 铺 ， 此 时 需要 调用 createPattern() 函 数 来 蔡 代 之 前 的 


drawImage() 函 数 。 函 数 createPattem(0 的 语法 格式 如 下 。 


createPattern (image, type) 
其 中 image 表示 要 绘制 的 图 像 ，type 表示 平 铺 的 类 型 ， 其 具体 含义 如 表 7-9 所 示 。 
表 7-9 图像 平 铺 的 类 型 


横 方向 平 铺 
纵 方 向 平 铺 





【 例 7.14】 图 像 平 铺 ( 实 例文 件 : ch07\7.14.htmD) 


<1DOCTYPE html> 
< html> 
<head> 
<title> 绘 制图 像 平 铺 </title> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 形 平 铺 </h1> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
function draw(id){ 


Var canvas=document .getElementById (id) 
if(canvas==nul11){ 
return false; 
} 
Var context=canvas.getContext ('2d'); 
context .fillstyle="#eeeeff"; 
context .fillRect(0,0,400,300); 
image=new Image(); 
image.src="01.jpg"; 
image.onload=function(){ 
Var ptrn=context.createPattern (image, 'repeat'); 
context .fillSstyle=ptrn; 
context .fillRect(0,0,400,300); 
} 
</script> 
</body> 
</html> 


上 面 代码 中 ， 使 用 fillRect0 方 法 创建 了 一 个 宽度 为 400 像素 ， 高 度 为 300 像素 ， 左 上 角 
坐标 位 置 为 (0.0) 的 矩形 ， 然 后 创建 了 一 个 Image 对 象 ，src 表示 连接 一 个 图 像 源 ， 再 使 用 
createPattern() 方 法 绘制 一 个 图 像 ， 其 方式 是 完全 平 铺 ， 并 将 这 个 图 像 作为 一 个 模式 填充 到 和 矩 
形 中 。 最 后 绘制 这 个 矩形 ， 此 和 矩形 大 小 完全 覆盖 原来 的 图 形 。 


在 下 中 浏览 的 效果 如 图 7-14 所 示 ， 在 页 面 上 绘制 了 一 个 图 像 ， 其 图 像 以 平 铺 的 方式 充 
满 整个 矩形 。 








染 国 蔓 散 9 JWLH 尖 丛 _ 需 / “和 
py NG 


EYP] * 
文件 痪 费 | 日 ” 坦 看 (V) 中 写 夫 (A 工具。 基 玲 (H) 














图 形 平 铺 








图 7-14 图 像 平 铺 
7.6.3 “案例 15 一 一 图 像 裁剪 


在 处 理 图 像 时 经 常会 遇 到 裁剪 这 种 需求 ， 即 在 画布 上 裁剪 出 一 块 区 域 ， 这 块 区 域 是 在 裁 
前 动作 之 前 ， 由 绘图 路 径 设 定 的 ， 可 以 是 方形 、 圆 形 、 五 星 形 和 其 他 任何 可 以 绘制 的 轮廓 形 
状 。 所 以 ， 裁 剪 路 径 其 实 就 是 绘图 路 径 ， 只 是 这 个 路 径 不 是 拿 来 绘图 的 ， 而 是 设 定 显示 区 域 
和 遮挡 区 域 的 一 个 分 界线 。 

完成 对 图 像 的 裁剪 ， 可 能 要 用 到 clip0 方 法 。Clip0 方 法 表示 给 canvas 设置 一 个 剪辑 区 











本 
17@ 





APP 和 移动 网 站 开发 


案例 课堂 由 一 





域 ， 在 调用 clip() 方 法 之 后 的 代码 只 对 这 个 设 定 的 剪辑 区 域 有 效 ， 不 会 影响 其 他 地 方 。 这 个 方 
法 在 要 进行 局 部 更 新 时 很 有 用 。 默 认 情况 下 ， 剪 辑 区 域 是 一 个 左上 角 在 (0.0)， 宽 和 高 分 别 等 
于 canvas 元 素 的 宽 和 高 。 

【 例 7.15】 图 像 裁剪 (实例 文件 : ch07\7.15.htmD) 


<!DOCTYPE html> 

< html> 

<head> 
<title> 绘 制图 像 裁 前 </title> 


<script type="text/javascript" src="script.js"></script> 





</head> 

<body onload="draw('canvas');"> 

<h1> 图 像 裁剪 实例 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw(id){ 
Var canva ocument .getElementById (id); 
if(canvas==null1){ 
return false; 





} 
Var context=canvas.getContext('2d'); 
Var gr=context.createLinearGradient (0,400,300,0); 
gr.addColorstop(0,'rgb(255,255,0)"'); 
gr.addColorstop(1,'rgb(0,255,255)"'); 
context .fillstyle=gr; 
context.fillRect(0,0,400,300); 
image=new Image(); 
image.onload=function(){ 
drawImg (context, image); 
二 
image.src="01.jpg"7 
} 
function drawImg (context, image){ 
Create8StarClip (context); 
context .drawImage (image, -50,-150,300,300); 
} 
function create8StarClip (Context) { 
Var n=0; 
Var dx=100; 
Var dy=0; 
Var s=150; 
Context .beginPath () > 
Context .translate(100,150) 7 
Var x=Math.sin(0); 
Var Y=Math.cos (0) 
Var dig=Math.PI/5*4; 
for (Var i=0;i<8;i++){ 
Var x=Math.sin(i*dig); 
var y=Math.cos (i*dig); 
context .lineTo (dx+x*s, dyty*s); 
|! 


context .clip(); 


a 


</script> 
</body> 
</html> 


上 面 代 码 中 ,创建 了 3 个 JavaScript 函数 ， 其 中 create8StarClip0 函 数 完成 了 多 边 的 图 形 
创建 ， 其 中 以 此 图 形 作 为 裁剪 的 依据 。drawImg0 函 数 表示 绘制 一 个 图 形 ， 其 图 形 带 有 裁剪 区 
域 。draw0 函 数 完成 对 画布 对 象 的 获取 ， 并 定义 一 个 线性 渐变 ， 然 后 创建 了 一 个 Image 对 象 。 

在 正 中 浏览 的 效果 如 图 7-15 所 示 ， 在 显示 页 面 上 绘制 了 一 个 5 边 形 ， 图 像 作为 5 边 形 
的 背景 显示 ， 从 而 实现 对 象 图 像 的 裁剪。 
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7-15 ”图 像 裁剪 


7.6.4 ”案例 16 一 一 像素 处 理 


在 计算 机 屏幕 上 可 以 看 到 色彩 斑 澜 的 图 像 ， 其 实 这 些 图 像 都 是 由 一 个 个 像素 点 组 成 的 。 
一 个 像素 对 应 着 内 存 中 的 一 组 连续 的 二 进 制 位 。 由 于 是 二 进 制 位 ， 每 个 位 上 的 取 值 当然 只 能 
是 0 或 者 1， 这 样 ， 这 组 连续 的 二 进 制 位 就 可 以 由 0 和 1 排列 组 合 出 很 多 种 情况 ， 而 每 一 种 排 
列 组 合 就 决定 了 这 个 像素 的 一 种 颜色 。 因 此 ， 每 个 像素 点 由 4 个 字 节 组 成 。 

这 4 个 字 节 代表 的 含义 分 别 是 : 第 1 个 字 节 决定 像素 的 红色 值 ; 第 2 个 字 节 决定 像素 的 
绿色 值 ; 第 3 个 字 节 决定 像素 的 蓝 色 值 ; 第 4 个 字 节 决定 像素 的 透明 度 值 。 

在 画布 中 ， 可 以 使 用 imageData 对 象 用 来 保存 图 像 像素 值 ， 其 有 width、height 和 data 这 
3 个 属性 ， 其 中 data 属性 就 是 一 个 连续 数组 ， 图 像 的 所 有 像素 值 其 实 是 保存 在 data 里 面 的 。 

data 属性 保存 像素 值 的 方法 如 下 。 


imageData.data[index*4 +0] 
imageData.data[index*4 +1] 
imageData.data[index*4 +2] 
imageData.data[index*4 +3] 


上 面 取出 了 data 数组 中 连续 相 邻 的 4 个 值 ， 这 4 个 值 分 别 代表 了 图 像 中 第 index+1 个 像 
素 的 红色 、 绿 色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 index 从 0 开始 ， 图 像 中 总 共有 
width x height 个 像素 ， 数 组 中 总 共 保存 了 width x height x 4 个 数值 。 

画布 对 象 有 3 个 方法 用 来 创建 、 读 取 和 设置 imageData 对 象 ， 如 表 7-10 所 示 。 
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表 7-10 图 像 像素 处 理 的 方法 

说 明 
在 内 存 中 创建 一 个 指定 大 小 的 imageData 对 象 ( 即 像素 数组 )， 对 象 
中 的 像素 点 都 是 黑色 透明 的 ， 即 rgba(0.0.0.0) 
返回 一 个 imageData 对 象 ， 这 个 imageData 对 象 中 包含 了 指定 区 域 
的 像素 数组 
将 imageData 对 象 绘制 到 屏幕 的 指定 区 域 上 


3 





createImageData(width, height) 





getImageData(x, y, width, height) 





utImageData(data, x. 


【 例 7.16】 图 像 像素 处 理 (实例 文件 : ch07\7.16.html) 


<!DOCTYPE html> 
< html> 

<head> 
<title> 图 像 像素 处 理 </title> 


<script type="text/javascript" src="script.js"></script> 








</head> 

<body onload="draw('canvas');"> 

<h1> 像 素 处 理 示 例 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw(id){ 
Var canvas=document .getElementById(id); 
if(canvas==null1){ 
return false; 
Var Context=canvas .getContext ('2d'); 
image=new Image () 7 
image .src="01.jpg"7 
image.onload=function(){ 
context .drawImage (image, 0,0); 
Var imagedata=context .getImageData (0,0, image.width, image.height); 
for (var i=0,n=imagedata.data.length;i<n;i+=4){ 
imagedata.data[i+0]=255-imagedata.data[i+0]7 
imagedata.data[i+1]=255-imagedata.data[i+2]; 
imagedata.data[i+2]=255-imagedata.data[i+1]; 
} 
context .putImageData (imagedata,0,0); 
3 
} 
</script> 
</body> 
</html> 


在 上 面 代 码 中 ， 使 用 getImageData0 方 法 获取 一 个 imageData 对 象 ， 并 包含 相关 的 像素 数 
组 。 在 for 循环 中 ， 对 像素 值 重 新 赋值 ， 然 后 使 用 putImageData() 方 法 将 处 理 过 的 图 像 在 画布 
上 显示 出 来 。 

在 正 中 浏览 的 效果 如 图 7-16 所 示 ， 在 页 面 上 显示 了 一 个 图 像 ， 其 图 像 明显 经 过 像素 处 
理 ， 没 有 原来 显示 清晰 。 
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图 7-16 像素 处 理 


7.7 ”图形 的 保存 与 恢复 


在 画布 对 象 中 绘制 图 形 或 图 像 时 ， 可 以 将 这 些 图 形 或 者 图 形 的 状态 进行 改变 ， 即 永久 保 
存 图 形 或 图 像 。 另 外 ， 用 户 还 可 以 恢复 已 经 保存 的 图 形 或 图 像 。 本 章节 将 详细 讲述 图 形 的 保 
存 和 恢复 方法 。 


7.7.1 案例 17 一 一 保存 与 恢复 状态 


在 画布 对 象 中 ， 由 两 个 方法 管理 绘制 状态 的 当前 栈 : save( 方 法 把 当前 状态 压 入 栈 中 ， 而 
restore() 方 法 从 栈 顶 弹出 状态 。 绘 制 状态 不 会 覆盖 对 画布 所 做 的 每 件 事情 。 其 中 save() 方 法 用 
来 保存 canvas 的 状态 。 之 后 ， 可 以 调用 canvas 的 平移 、 放 缩 、 旋 转 、 错 切 、 裁 剪 等 操作 。 
restore() 方 法 用 来 恢复 canvas 之 前 保存 的 状态 ， 防 止 使 用 save0 方 法 后 对 canvas 执行 的 操作 对 
后 续 的 绘制 有 影响 。save0 方 法 和 restore() 方 法 要 配对 使 用 (restore() 方 法 可 以 比 save() 方 法 少 ， 
但 不 能 多 )， 如 果 restore() 方 法 调用 次 数 比 save() 方 法 多 ， 会 引发 Error。 

【 例 7.17】 保 存 与 恢复 图 像 的 状态 (实例 文件 : ch07\7.17.htmD 


<!DOCTYPE html> 

<html> 

<head><title> 保 存 与 恢复 </title></head> 

<body> 

<canvas id="myCanvas" width="500" height="400" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var ctx=c.getContext ("2d"); 

ctx £111Style = “rgb(0r07;255)"» 

ctx.save(); 

ctx.fillRect(50,50,100,100); 

ctx.fillstyle = "rgb(255,0,0)"; 

ctx.save(); 

ctx.fillRect (200,50,100,100); 

ctx.restore() 

ctx.fillRect (350,50,100,100); 
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ctx.restore(); 

ctx.fillRect (50, 200, 100, 100); 

</script> 

</body> 

</html> 

在 上 面 代码 中 ， 绘 制 了 4 个 矩形 ， 在 第 1 个 绘制 之 前 ， 定 义 当 前 矩形 的 显示 颜色 ， 并 将 
此 样式 压 入 到 栈 中 ， 然 后 创建 了 一 个 矩形 。 第 2 个 矩形 绘制 之 前 ， 重 新 定义 了 矩形 显示 颜 
色 ， 并 使 用 save( 方 法 将 此 样式 压 入 到 栈 中 ， 然 后 创建 了 一 个 和 矩形。 在 第 3 个 矩形 绘制 之 前 ， 
使 用 restore( 方 法 恢复 当前 显示 颜色 ， 即 调用 栈 中 的 最 上 层 颜 色 绘制 矩形 。 第 4 个 矩形 绘制 之 
前 ， 继 续 使 用 restore0) 方 法 ， 调 用 最 后 一 个 栈 中 的 元 素 定义 矩形 颜色 。 

在 下 中 浏览 的 效果 如 图 7-17 所 示 ， 在 页 面 上 绘制 了 4 个 矩形 ， 第 1 个 和 第 2 个 矩形 显 
示 为 蓝 色 ， 第 2 个 和 第 3 个 矩形 显示 为 红色 。 
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图 7-17 恢复 和 保存 状态 


7.7.2 ”案例 18 一 一 保存 文件 


当 绘 制 出 漂亮 的 图 形 时 ， 有 时 需要 保存 这 些 劳动 成 果 。 这 时 可 以 将 当前 画布 元 素 (而 不 是 
2D 环境 ) 的 当前 状态 导出 到 数据 URL。 导 出 很 简单 ， 可 以 利用 toDataURL() 方 法 来 完成 ， 它 可 
以 不 同 的 图 片 格式 来 调用 。 目 前 只 有 PNG 格式 才 是 规范 定义 的 格式 ， 不 同 浏览 器 还 支持 其 他 
的 格式 。 

目前 Firefox 和 Opera 浏览 器 只 支持 PNG 格式 ，Safari 支持 GIF、PNG 和 JPG 格式 。 大 
多 数 浏 览 器 支持 读 取 base64 编码 内 容 ， 如 一 幅 图 像 。URL 的 格式 如 下 。 


data:image/png;base64, iVBORwOKGgoOAAAANSUhEUgAAAfQAAAHOCAYAAADL1t 


它 以 一 个 data 开始 ， 然 后 是 mine 类 型 ， 之 后 是 编码 和 base64， 最 后 是 原始 数据 。 这 些 原 
始 数 据 就 是 画布 元 素 所 要 导出 的 内 容 ， 并 且 浏 览 器 能 够 将 数据 编码 为 真正 的 资源 。 
【 例 7.18】 保 存 图 像 文 件 (实例 文件 ，ch07\7.18.html) 


<!DOCTYPE html> 
<html> 
<body> 











合作 


<canvas id="myCanvas" width="500" height="500" style="border:1px solid 
blue”> 

Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 
cxt.fillstyle='rgb(0,0,255)'; 

cxt.fillRect (0,0,cxt.canvas.width,cxt.canvas.height); 
CXb fillStyle="rgb(0,25570) "3 

cxt.fillRect (10,20,50,50); 
window.location=cxt.canvas.toDataURL(' image/png '); 
</script> 

</body> 

</html> 


在 上 面 代码 中 ， 使 用 canvas.toDataURL 语句 将 当前 绘制 的 图 像 保 存 到 URL 数据 中 。 
在 正 中 浏览 的 效果 如 图 7-18 所 示 ， 在 显示 页 面 中 无 任何 数据 显示 ， 并 且 提示 无 法 显示 
该 页 面 。 此 时 需要 注意 的 是 鼠标 指针 指向 的 位 置 ， 即 地 址 栏 中 的 URL 数据 。 
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图 7-18 保存 图 形 


7.8 综合 案例 1 一 一 绘制 火柴 棒 人 物 


漫画 中 最 常见 的 一 种 图 形 就 是 火柴 棒 人 ， 通 过 简单 的 几 个 笔画 ， 就 可 以 绘制 一 个 传神 的 
动漫 人 物 。 使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 。 有 具体 步骤 如 下 。 

本 了 I 分 析 需 求 。 

一 个 火柴 棒 人 由 脸 部 和 身躯 部 分 组 成 。 脸 部 是 一 个 圆 形 ， 其 中 包括 眼睛 和 嘴巴 ;身躯 由 
几 条 直线 组 成 ， 包 括 手 和 腿 等 。 实 际 上 此 案例 就 是 绘制 贺 形 、 弧 度 和 直线 的 组 合 。 实 例 完成 
后 ， 效 果 如 图 7-19 所 示 。 

ET 实现 HTML 页 面 ,定义 画布 canvas。 


<!1DOCTYPE html> 
<html> 


<title> 绘 制 火柴 棒 人 </title> 
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<body> 
<canvas id="myCanvas" width="500" height="300" style="border:1lpx solid blue"> 
Your browser does not support the canvas element. 













































































</canvas> 

</body> 

</html> 

|9) Hser Mdminist P -cx 
\ 7-19 火柴 棒 人 
N 
AN 在 正 9.0 中 浏览 的 效果 如 图 7-20 所 示 ， 页 面 显示 了 一 个 画布 边框。 
、 A HasersWdmirist PD - © X | asm 和 人 Ga 
ET 改 天 人) 工具 可 双 H) 
图 7-20 定义 画布 边框 

实现 头 部 轮廓 绘制 。 


<script type="text/javascript"> 

var c=document .getElementById("myCanvas"); 
Var cxt=c.getContext ("2d"); 

cxt .beginPath() 7 
cxt.arc(100,50,30,0,Math.PI*2,true); 
xt 

</script> 


这 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 arc0 函 数 中 ，x 和 y 的 坐标 为 (100,50)， 
半径 为 30 像素 ， 另 两 个 参数 为 弧度 的 开始 和 结束 ， 第 6 个 参数 表示 绘制 弧 形 的 方向 ， 即 顺 时 
针 和 逆 时 针 方 向 。 

在 正 9.0 中 浏览 的 效果 如 图 7-21 所 示 ， 页 面 显示 了 一 个 实心 








其 颜色 为 黑色 。 
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7-21 绘制 头 部 轮廓 





绘制 笑脸 ，JavaScript 代码 如 下 。 


cxt .beginPath() 7 
cxt.strokeStyle="'#c00'; 

cxt .lineWidth=3; 
cxt.arc(100,50,20,0,Math.PI, false); 
cxt.stroke(); 


此 处 使 用 beginPath0) 方 法 ， 表 示 重 新 绘制 ， 并 设 定 线条 宽度 ; 然后 绘制 了 一 个 弧 形 ， 这 
个 弧 形 是 从 嘴 部 开始 的 弧 形 。 
在 下 9.0 中 浏览 的 效果 如 图 7-22 所 示 ， 页 面 上 显示 了 一 个 漂亮 的 半圆 式 的 笑脸 。 
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7-22 ”绘制 笑脸 


ED 绘制 眼睛 ，JavaScript 代码 如 下 。 


cxt .beginPath() 7 

CXt .fillstyle="#c00"; 
cxt.arc(90,45,3,0,Math.PI*2,true); 
Cxt EL 

cxt .moveTo (113,45); 
cxt.arc(110,45,3,0,Math.PI*2,true); 
RE 人 

cxt.stroke(); 


首先 创建 了 一 个 实体 样式 的 眼睛 ， 然 后 使 用 moveto() 方 法 平移 后 绘制 右 眼 。 在 IE 9.0 中 
浏览 的 效果 如 图 7-23 所 示 ， 页 面 中 显示 了 一 双眼 睛 。 
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图 7-23 绘制 眼睛 


ESD 绘制 身躯。 


CXt .moveTo (100,80) 7 
cxt.lineTo(100,150); 
cxt.moveTo(100,100), 
cxt.lineTo(60,120); 
cxt .moveTo(100,100); 
cxt.lineTo(140,120); 
cxt.moveTo(100,150); 
cxt.lineTo(80,190); 
cxt.moveTo(100,150); 
cxt.lineTo(140,190); 
cxt。.Stroke()? 


上 面 代码 以 moveTo0 函 数 作为 开始 坐标 ， 以 lineTo0 函 数 为 终点 ， 绘 制 不 同 的 直线 ， 这 
些 直 线 的 坐标 位 置 需要 在 不 同 地 方 汇集 ， 两 只 手 在 坐标 位 置 (100.100) 处 交叉 ， 两 只 脚 在 坐标 





位 置 (100,150) 处 交叉 。 
在 正 9.0 中 浏览 的 效果 如 图 7-24 所 示 ， 页 面 中 显示 了 一 个 火柴 棒 人 ， 相 比较 图 7-23， 多 
了 一 个 身躯 。 























7-24 ”定义 身躯 


7.9 综合 案例 2 一 一 绘制 商标 


绘制 商标 是 canvas 画布 的 用 途 之 一 ， 如 可 以 绘制 Adidas 和 Nike 商标 。Nike 的 图 标 比 
Adidas 复杂 ，Adidas 都 是 由 直线 组 成 ， 而 Nike 则 多 了 曲线 。 实 现 Nike 商标 的 步骤 如 下 。 


二 
全 i 
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EEC 分 析 需 求 。 
要 绘制 两 条 曲线 ， 需 要 找到 曲线 的 参考 点 (参考 点 决定 了 曲线 的 曲率 )， 这 需要 慢 慢 地 移 

动 ， 然 后 查看 效果 ， 并 反复 比较 。quadraticCurveTo(30.79.99.78) 函 数 有 两 组 坐标 : 第 一 组 坐标 

为 控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 。 对 
GT》 构建 HIML， 实 现 canvas 画布。 9 
<!DOCTYPE html> 绘 
<html> 
<head> 
<title> 绘 制 商标 </title> 
</head> 
<body> 


<canvas id="adidas" width="375px" height="]132px" style="border:lpx solid 
#000;"></canvas> 

</body> 

</html> 


在 还 9.0 中 浏览 的 效果 如 图 7-25 所 示 ， 此 时 只 显示 一 个 画布 边框 ， 其 内 容 还 没有 绘制 。 
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图 7-25 ”定义 画布 边框 
实现 基本 图 形 ，JavaScript 代码 如 下 。 


<script> 

function drawAdidas(){ 
// 取 得 convas 元 素 及 其 绘图 上 下 文 
Var canvas=document .getElementById('adidas'); 
Var context=canvas.getContext('2d'); 
// 保 存 当 前 绘图 状态 
context .save(); 
// 开 始 绘制 打 钧 的 轮廓 
Context .beginPath() 7 
context .moveTo (53,0) 7 
// 绘 制 上 半 部 分 曲线 ， 第 一 组 坐标 为 控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 
context .quadraticCurveTo(30,79,99,78); 
context .lineTo(371,2); 
context.lineTo(74,134); 
context .quadraticCurveTo(-55,124,53,0); 
// 用 红色 填充 
context .fillSstyle="#da251lc"; 
context .fill(); 
// 用 3 像素 深 红线 条 描 边 
Context.1ineWwidth=37 
// 连 接 处 平滑 


context.lineJoin='round'; 
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context.strokeStyle="#d40000"; 
context.stroke(); 


// 恢 复原 有 绘图 状态 


context .restore () 7 


window.addEventListener ("load",drawAdidas,true); 
</script> 


在 正 9.0 中 浏览 的 效果 如 图 7-26 所 示 ， 页 面 中 显示 了 一 个 商标 图 案 ， 颜 色 为 红色 。 
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7-26 ”绘制 商标 


7.10 高 手 甜点 


甜点 1: <canvas> 标 记 的 宽度 和 高 度 ， 是 否 可 以 在 CSS 属性 中 定义 ? 

在 添加 一 个 <canvas> 标 记 的 时 候 ， 会 在 <canvas> 标 记 的 属性 里 填写 要 初始 化 的 <canvas> 标 
记 的 高 度 和 宽度 ， 代 码 如 下 。 

<canvas width="500" height="400">Not Supported!</canvas> 

如 果 把 高 度 和 宽度 写 在 了 CSS 里 ， 结 果 发 现在 绘图 的 时 候 坐标 获取 出 现 差异 ， 
canvas.width 和 canvas.height 分 别 是 300 和 150， 和 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 
个 属性 必须 和 <canvas> 标 记 一 起 出 现 。 

甜点 2: 画布 中 stroke 和 fill 二 者 的 区 别 是 什么 ? 

HTML 5 中 将 图 形 分 为 两 大 类 ， 第 一 类 称 作 stroke， 就 是 轮廓 、 勾 勒 或 者 线条 ， 总 之 ， 


形 是 由 线条 组 成 的 ， 第 二 类 称 作 fl， 就 是 填充 区 域 。 上 下 文 对 象 中 有 两 个 绘制 矩形 的 方法 ， 
可 以 让 我 们 很 好 地 理解 这 两 大 类 图 形 的 区 别 ， 一 个 是 srokeRect() 方 法 ， 另 一 个 是 flIRect0 方 法 。 





7.11 ” 跟 我 练 练 手 


练习 1: 绘制 基本 形状 。 

练习 2: 绘制 渐变 图 形 。 

练习 3: 绘制 其 他 样式 的 图 形 。 
练习 4: 使 用 图 像 。 

练习 5: 图 形 的 保存 与 恢复 。 
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来 获取 地 理 位 置 。 





已 掌握 的 在 方 框 中 打 钩 ) 


根据 访问 者 访问 网 站 的 方式 ， 有 多 种 获取 地 理 位 置 的 方法 ， 本 章 主要 介绍 如 
目标 ( 
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APP 和 移动 网 站 开发 
一 一 一 案例 课堂 四 一 


8.1 ”Geolocation API 获取 地 理 位 置 


在 HIML 5 网 页 代码 中 ， 通 过 一 些 有 用 的 API， 可 以 查找 访问 者 当前 的 位 置 。 本 章节 将 
详细 学 习 地 理 定 位 的 原理 和 获取 地 理 位 置 的 方法 和 技巧 。 


8.1.1 地 理 定 位 的 原理 











NN 由 于 访问 者 浏览 网 站 的 方式 不 用 ， 可 以 通过 下 列 方式 确定 其 位 置 。 
NN ®@ ”如 果 网 站 浏览 者 使 用 计算 机 上 网 ， 通 过 获取 浏览 者 的 IP 地 址 ， 从 而 确定 其 具体 
位 置 。 
®@ ”如 果 网 站 浏览 者 通过 手机 上 网 ， 通 过 获取 浏览 者 的 手机 信号 接收 塔 ， 从 而 确定 其 具 
体位 置 。 
®@ ”如 果 网 站 浏览 者 的 设备 上 具有 GPS 硬件 ， 通 过 获取 GPS 发 出 的 载波 信号 ， 可 以 获取 
其 具体 位 置 。 


e@ ”如 果 网 站 浏览 者 通过 无 线 上 网 ， 可 以 通过 无 线 网 络 连接 获取 其 具体 位 置 。 
Br API 是 应 用 程序 的 编程 接口 ， 是 一 些 预先 定义 的 函数 ， 目 的 是 提供 应 用 程序 与 开 
发 人 员 基 于 某 软件 或 硬件 的 以 访问 一 组 例 程 的 能 力 ， 而 又 无 须 访问 源码 或 理解 内 部 工 
作 机 制 的 细节 。 


就 


8.1.2 ”获取 定位 信息 的 方法 


在 了 解 了 地 理 定位 的 原理 后 ， 下 面 介绍 获取 定位 信息 的 方法 ， 根 据 访问 者 访问 网 站 的 方 
可 以 通过 下 列 方法 之 一 确定 地 理 位 置 。 

@ ”利用 IP 地址 定位 。 

@ ”利用 GPS 功能 定位 。 

@ ”利用 Wi-Fi 定位 。 

@ ”利用 Wi-Fi 和 GPRS 联合 定位 。 

@ ”利用 用 户 自 定义 定位 数据 定位 。 

使 用 上 述 的 哪 种 方法 将 取决 于 浏览 器 和 设备 的 功能 ， 然 后 ， 浏 览 器 确定 位 置 并 将 其 传输 
回 地 理 位 置 ， 但 需要 注意 的 是 无 法 保证 返回 的 位 置 是 设备 的 实际 地 理 位 置 ， 因 为 这 涉及 个 人 
隐私 问题 ， 并 不 是 每 个 人 都 想 与 他 人 共享 其 地 理 位 置 。 


8.1.3 ”常用 地 理 定位 方法 


通过 地 理 定位 ， 可 以 确定 用 户 的 当前 位 置 ， 并 能 获取 用 户 地 理 位 置 的 变化 情况 。 其 中 ， 
最 常用 的 就 是 API 中 的 getCurrentPositon() 方 法 。 
getCurrentPositon() 方 法 的 语法 格式 如 下 。 


void getCurrentPosition(successCallback, errorCallback, options); 


式 








二 
售 1 


其 中 successCallback 参数 是 指 在 位 置 成 功 获取 时 用 户 想 要 调用 的 函数 名 称 ，errorCallback 
参数 是 指 在 位 置 获取 失败 时 用 户 想 要 调用 的 函数 名 称 ，options 参数 指出 地 理 定 位 时 的 属性 
设置 。 

Sn 访问 用 户 位 置 是 耗 时 的 操作 ， 并 且 由 于 涉及 个 人 隐私 问题 ， 还 要 取得 用 户 的 同意 。 

二 

如 果 地 理 位 置 定位 成 功 ， 新 的 position 对 象 将 调用 displayOnMap() 函 数 ， 显 示 设 备 的 当前 
位 置 。 

那么 position 对 象 的 含义 是 什么 呢 ? 作为 地 理 定位 的 API，position 对 象 包含 位 置 确定 时 
的 时 间 戳 (imestamp) 和 位 置 的 坐标 (coords)， 有 具体 语法 格式 如 下 。 


Interface Position 

上 

readonly attribute Coordinates coords 
readonly attribute DOMTimeStamp timestamp; 
J 








8.1.4 ”案例 1 一 一 判断 浏览 器 是 否 支持 HTML 5 获取 地 理 位 置信 息 


在 用 户 试 图 使 用 地 理 定位 之 前 ， 应 该 先 确保 浏览 器 是 否 支 持 HTML 5 获取 地 理 位 置信 
息 。 这 里 介绍 判断 的 方法 ， 具 体 代码 如 下 。 


function init() 

if (navigator.geolocation) { 

// 获 取 当 前 地 理 位 置信 息 

人 geolocation.getCurrentPosition (onSuccess， onError, options); 
} else 

alert tv 你 的 测 览 器 不支 持 HTML 5 来 获取 地 理 位 置信 息 。 

} 


该 代码 解释 如 下 。 
1. onSuccess() 函 数 
该 函数 是 获取 当前 位 置信 息 成 功 时 执行 的 回调 函数 。 
在 onSuccess0 回 调 函数 中 ， 用 到 了 参数 position， 代 表 一 个 具体 的 position 对 象 ， 表 示 当 
前 位 置 ， 其 具有 如 下 属性 。 
@ “latitude: 当前 地 理 位 置 的 纬度 。 
longitude: 当前 地 理 位 置 的 经 度 。 
altitude: 当前 位 置 的 海拔 高 度 (不 能 获取 时 为 nulD。 
accuracy: 获取 到 的 纬度 和 经 度 的 精度 (以 米 为 单位 )。 
altitudeAccuracy: 获取 到 的 海拔 高 度 的 经 度 (以 米 为 单位 )。 
heading: 设备 的 前 进 方向 。 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 (不 能 获取 时 为 
null)。 
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@。 speed: 设备 的 前 进 速度 (以 米 / 秒 为 单位 ， 不 能 获取 时 为 null)。 
@ timestamp: 获取 地 理 位 置信 息 时 的 时 间 。 


2. onErrorO 函 数 


该 函数 是 获取 当前 位 置信 息 失败 时 所 执行 的 回调 函数 。 
在 onError0 回 调 函 数 中 ， 用 到 了 error 参数 ， 其 具有 如 下 属性 。 
@ ”code: 错误 代码 ， 有 如 下 值 。 
4 用 户 拒绝 了 位 置 服务 (属性 值 为 1)。 
* ”获取 不 到 位 置信 息 (属性 值 为 2)。 
* ”获取 信息 超时 错误 (属性 值 为 3)。 
@ message: 字符 串 ， 包 含 了 具体 的 错误 信息 。 


3. options 参数 


options 是 一 些 可 选 熟悉 列表 。 在 options 参数 中 ， 可 选 属性 如 下 。 

@ ”enableHighAccuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 。 

@ timeout: 设置 超时 时 间 ( 单 位 为 毫秒 )。 

。 maximumAge: 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 ( 单 位 为 毫秒 )。 


8.1.5 ”案例 2 一 一 指定 纬度 和 经 度 坐 标 
对 于 地 理 定位 成 功 后 ， 将 调用 displayOnMap0 函 数 ， 语 法 格式 如 下 。 


function displayOnMap (position) 

{ 

var latitude=position.coords.latitude; 

var longitude=position.coords.longitude; 

} 

其 中 第 1 行 函数 从 position 对 象 获取 coordinates 对 象 ， 主 要 由 API 传递 给 程序 调用 。 第 3 
行 和 第 4 行 中 定义 了 两 个 变量 ，latitude 和 longitude 属性 存储 在 定义 的 两 个 变量 中 。 

为 了 在 地 图 上 显示 用 户 的 具体 位 置 ， 可 以 利用 地 图 网 站 的 API。 下 面 以 使 用 百度 地 图 为 
例 进行 讲解 ， 则 需要 使 用 Baidu Maps JavaScript API。 在 使 用 此 API 前 ， 需 要 在 HTML 5 页 面 
中 添加 一 个 引用 ， 具 体 代码 如 下 。 


<--baidu maps API> 

<script 

type="text/javascript"scr="http://api.map.baidu.com/api?key=*&v=1.0&services 

=true"> 

</script> 

其 中 * 号 代码 注册 到 key。 注 册 key 的 方法 是 在 http: //openapi.baidu.com/map/index.html 
网 页 中 ， 注 册 百 度 地 图 API， 然 后 输入 需要 内 置 百度 地 图 页 面 的 URL 地 址 ， 生 成 API 密 钥 ， 
然后 将 key 文件 复制 保存 。 

虽然 已 经 包含 了 Baidu Maps JavaScript， 但 是 页 面 中 还 不 能 显示 内 置 的 百度 地 图 ， 还 需要 
添加 HTML 语言 ， 将 地 图 从 程序 转化 为 对 象 ， 还 需要 加 入 以 下 源 代码 。 


























<script 
type="“text/javascript”scr="“http://api.map.baidu.com/api?key=*&v=1.0&service 
s=true”> 

</script> 

<div style="width:600px;height:220px;border:lpx solid gary;margin— 
top:15px;" id="container"> 

</div> 

<script type="text/javascript"> 

Var map = new BMap.Map ("container"); 

map .centerRndZoom (new BMap.Point (***,***),17); 

map.addControl (new BMap.NavigationControl ()); 

map.addControl (new BMap.ScaleControl()); 

map.addControl (new BMap.OverviewMapControl()); 

Var local = new BMap.LocalSearch (map, 


enderOptions:{map: map} 

} 

a .search ("输入 搜索 地 址 ") ; 

</script> 

上 述 代码 分 析 如 下 。 

@ 其 中 前 2 行 主要 是 把 Baidu Maps API 程序 植 入 源码 中 。 

e 第 3 行 在 页 面 中 设置 一 个 标签 ， 包 括 宽度 和 长 度 ， 用 户 可 以 自己 调整 ，border=1px 
是 定义 外 框 的 宽度 为 1 个 像素 ，solid 为 实 线 ，gray 为 边框 显示 颜色 ，margin-top 为 
该 标签 距离 与 上 部 的 距离 。 

e 第 7 行为 地 图 中 自己 位 置 的 坐标 。 

@ 第 8 一 10 行 为 植 入 地 图 缩放 控制 工具 。 

e 第 11 一 16 行为 地 图 中 自己 的 位 置 ， 只 需 在 local search 后 输入 自己 的 位 置 名 称 即 可 。 


8.1.6 ”案例 3 一 一 获取 当前 位 置 的 经 度 与 纬度 


如 下 代码 为 使 用 纬度 和 经 度 定位 坐标 的 案例 。 
ET 打开 记事 本 文件 ， 在 其 中 输入 如 下 代码 。 


<!DOCTYPE html> 


<html> 
<head> 
<title> 纬 度 和 经 度 坐标 </title> 
<style> 
body {background-color:#fff;} 
</style> 
</head> 
<body> 
<p id="geo loc"><p> 
<script> 
function getElem(id) { 
return typeof id === 'string' ? document .getElementById(id) : id; 


} 


Eunction show it(lat, lon) { 
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var str = ' 您 当前 的 位 置 ， 纬 度 : ' + lat + '， 经 度 : ' + lon; 
getElem('geo loc') .innerHTML = str; 
上 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
show_it (position.coords.latitude, position.coords.longitude); 
}, 
function(err) { 
getElem('geo loc').innerHTML = err.code + "|" + err.message; 
]) 7 
hb else 和 
getElem('geo loc').innerHTML = "您 当前 使 用 的 浏览 器 不 支持 Geolocation 服务 "; 
} 
</script> 
</body> 
</html> 


EEC 使 用 Opera 浏览 器 打开 网 页 文件 ， 由 于 使 用 HTML 定位 功能 首先 要 由 用 户 人 允许 
其 位 置 共 享 才 可 获取 地 理 位 置信 息 ， 所 以 会 弹出 如 图 8-1 所 示 提示 框 ， 选 择 【 总 是 
允许 】 选 项 ， 单 击 【 确 定 】 按 钮 。 




















图 8-1 提示 框 


ES 此 时 将 弹出 地 理 位 置 共享 条 款 对 话 框 ， 选 择 接 受 条 款 ， 单 击 【 接 受 】 按 钮 ， 如 
8-2 所 示 。 





The Opera browser ls attempting to access your location using Googles 
ocation servce The sevice. provded py Gooye. a0ds Iocaton capablly 
‘0 applcations while using me Opera orowser 

By ticking agree below you agree io Googles Terms of Service and to the 
Collection use. sharing and onward transfer of your location data in 
accordance with Googles Privacy Policy 


Leam more 








[= = 











8-2 选择 接受 条 款 


划 剧 
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EYY 然后 在 页 面 中 将 显示 当前 页 面 打 开 时 所 处 的 地 理 位 置 ， 其 位 置 为 使 用 者 的 人 P 或 到 
GPS 定位 地 址 ， 如 图 8-3 所 示 。 | 
a 获 

|O hetpy/wwwoperaco-.. x [DO 地 

4 ao[ 理 

位 

置 











I ee < 








图 8-3 显示 当前 所 处 的 地 理 位 置 


每 次 使 用 浏览 器 打开 网 页 时 都 会 提醒 用 户 是 否 允许 地 理 位 置 共享 ， 为 了 安全 性 ， 
SS 用 户 应 当 妥善 使 用 地 址 共享 功能 。 


有 GZ 


8.2 浏览 器 对 地 理 定 位 的 支持 情况 


不 同 的 浏览 器 版 本 对 地 理 定位 技术 的 支持 情况 是 不 同 的 ， 如 表 8-1 所 示 为 常见 浏览 器 对 
地 理 定位 的 支持 情况 。 


表 8-1 常见 的 浏览 器 对 地 理 定位 支持 情况 








浏览 器 名 称 支持 Web 存储 技术 的 版 本 
Internet Explorer Internet Explorer 9 及 更 高 版 本 
Firefox Firefox 3.5 及 更 高 版 本 
Opera Opera 10.6 及 更 高 版 本 
Safari Safari 5 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 
Android Android 2.1 及 更 高 版 本 





8.3 ”综合 案例 一 一 在 网 页 中 调用 Google 地 图 


本 实例 介绍 如 何在 网 页 中 调用 Google 地 图 ， 以 获取 当前 设备 物理 地 址 的 经 度 与 纬度 。 具 
体操 作 步 又 如 下 。 
ED 调用 Google 地 图 ， 代 码 如 下 。 


<!DOCTYPE html> 
<head> 





二 
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<title> 获 取 当 前 位 置 并 显示 在 Google 地 图 上 </title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false"></script> 

<script type="text/javascript"> 


ECGDy 获取 当前 地 理 位 置 ， 代 码 如 下 。 


navigator.geolocation.getCurrentPosition(function (Position) { 
Var coords = position.coords; 
//console.1log (position); 


ETBY 设 定 地 图 参数 ， 代 码 如 下 。 


Var latlng = new google.maps.LatLng (coords.latitude, coords.longitude); 
var myOptions = { 

zoom: 14, // 设 定 放 大 倍数 

center: latlng, // 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeId: google.maps.MapTypeId.ROADMAP // 指 定 地 图 类 型 

}; 


创建 地 图 并 在 页 面 中 显示 ， 代 码 如 下 。 


Var map = new google.maps.Map (document .getElementBYId ("map") ，mYyOPtions) 7 


在 地 图 上 创建 标记 ， 代 码 如 下 。 


Var marker = new google.maps.Marker({ 

position: latlng， // 将 前 面 设 定 的 坐标 标注 出 来 

map: map // 将 该 标注 设置 在 刚才 创建 的 Map 中 
]) 


创建 窗 体内 的 提示 内 容 ， 代 码 如 下 。 


Var infoWindow = new google.maps.InfoWindow({ 

content: "当前 位 置 : <br/> 经 度 : " + 1latlng.lat() + "<br/> 纬 度 : " + 
latlng.lng() // 提 示 窗 体内 的 提示 信息 

1D); 


打开 提示 窗口 ， 代 码 如 下 。 


infoWindow.open (map, marker); 
}, 


GT 根据 需要 再 编写 其 他 相关 代码 ， 如 处 理 错误 的 方法 和 打开 地 图 的 大 小 等 。 查 看 
此 时 页 面相 应 的 HTML 源 代码 如 下 。 


<1DOCTYPE html> 








<head> 
<title> 获 取 当前 位 置 并 显示 在 Google 地 图 上 </title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/ 


js?sensor=false"></script> 

<script type="text/javascript"> 

function init() { 

if (navigator.geolocation) { 

// 获 取 当 前 地 理 位 置 
navigator.geolocation.getCurrentPosition(function (Position) { 
Var coords = position.coords; 


| 


//console.log (position); 

// 指 定 一 个 Google 地 图 上 的 坐标 点 ， 同 时 指定 该 坐标 点 的 横 坐 标 和 纵 坐 标 

Var latlng = new google.maps.LatLng (coords.latitude, coords.longitude); 
Var myOptions = { 

Zoom: 14, // 设 定 放大 倍数 

center: latlng, // 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeId: google.maps.MapTypeId.ROADMAP // 指 定 地 图 类 型 


岗 序 册 履 治 洲 央 8 路 | 


hs 

/ /创建 地 图 ， 并 在 页 面 map 中 显示 

Var map = new google.maps.Map (document .getElementById ("map"), myOptions); 
// 在 地 图 上 创建 标记 

Var marker = new google.maps.Marker({ 


position: latlng， // 将 前 面 设 定 的 坐标 标注 出 来 





map: map // 将 该 标注 设置 在 刚才 创建 的 Map 中 

1D); 

// 标 注 提示 窗口 

Var infoWindow = new google.maps.InfoWindow({ 

content: "当前 位 置 : <br/> 经 度 : " + latlng.lat() + "<br/> 维 度 : " + 
latlng.1ng() // 提 示 窗 体内 的 提示 信息 NN 
1); 

// 打 开 提 示 窗 口 


infoWindow.open (map, marker); 
] 

function (error) { 

// 处 理 错误 

switch (error.code) { 

case 1: 

alert ("位 置 服务 被 拒绝 。") ; 
break; 

case 2: 

alert ("暂时 获取 不 到 位 置信 息 。"); 
break; 

Case 3: 

alert ("获取 信息 超时 。") ; 

break; 

default: 

alert ("未 知 错误 。") ; 

break; 

} 

3 

realse 

alert ("你 的 浏览 器 不 支持 HTML 5 来 获取 地 理 位 置信 息 。") ; 
} 

</script> 

</head> 

<body onload="init()"> 

<div id="map" style="width: 800px; height: 600px"></div> 
</body> 

</html> 


EESRD) 保存 网 页 后 ， 即 可 查看 最 终 效果 ， 如 图 8-4 所 示 。 
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8-4 ”程序 运行 结果 


8.4 高 手 甜 点 


甜点 1: 使 用 HTML 5 Geolocation API 获得 的 用 户 地 理 位 置 一 定 精 准 吗 ? 


不 一 定 精准 ， 因 为 该 特性 可 能 侵犯 用 户 的 隐私 ， 除 非 用 户 同意 ， 和 否则 用 户 的 位 置信 息 是 


不 可 用 的 。 


甜点 2: 地 理 位 置 API 可 以 在 国际 空间 站 上 使 用 吗 ? 可 以 在 月 球 上 或 者 其 他 星球 上 用 吗 ? 


地 理 位 置 标准 是 这 样 阐述 的 : “地 理 坐 标 参考 系 的 属性 值 来 自 大 地 测量 系统 (World 
Geodetic System (2d) [WGS84])。 不 支持 其 他 参考 系 ”。 国 际 空间 站 位 于 地 球 轨道 上 ， 所 以 宇 


航 员 可 以 使 用 经 纬度 和 海拔 来 描述 其 位 置 。 但 是 ， 大 地 测量 系统 是 以 地 球 为 中 心 的 ， 
就 不 能 使 用 这 个 系统 来 描述 月 球 或 者 其 他 星球 的 位 置 了 。 


8.5 跟 我 练 练 手 


练习 1: Geolocation API 获取 地 理 位 置 。 
练习 2: 获取 当前 位 置 的 经 度 与 纬度 。 
练习 3: 在 网 页 中 调用 Google 地 图 。 





因此 也 





即时 通信 应 用 





本 章 主 要 学 习 Web 通信 新 技术 。 其 中 包括 跨 文档 消息 传输 的 实现 
实时 通信 技术 ， 通 过 本 章 的 学 习 ， 可 以 更 好 地 掌握 跨 域 数据 的 通信 技术 


的 实现 ， 如 Web QQ 等 。 


学 习 目标 (已 掌握 的 在 方 框 中 打 钩 ) 


和 WebSocket 
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9.1 ” 跨 文档 消息 传输 


利用 跨 文档 消息 传输 功能 ， 可 以 在 不 同 域 、 端 口 或 网 页 文档 之 间 进 行 消息 的 传递 。 本 章 
节 将 详细 讲述 跨 文档 消息 传输 的 基本 知识 和 跨 文 档 消息 传输 的 方法 和 技巧 。 


9.1.1 ” 跨 文档 消息 传输 的 基本 知识 


利用 跨 文档 消息 传输 可 以 实现 跨 域 的 数据 推动 ， 使 服务 器 端 不 再 被 动 地 等 待 客户 端的 请 
求 ， 只 要 客户 端 与 服务 器 端 建立 了 一 次 连接 之 后 ， 服 务 器 端 就 可 以 在 需要 的 时 候 ， 主 动 地 将 
数据 推送 到 客户 端 ， 直 到 客户 端 显示 关闭 这 个 连接 。 

HTML 5 提供 了 在 网 页 文档 之 间 互 相 接 收 与 发 送 消息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 
到 网 页 所 在 页 面 对 象 的 实例 ， 不 仅 同 域 的 Web 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 
通信 。 

想 要 接收 从 其 他 文档 那里 发 过 来 的 消息 ， 就 必须 对 文档 对 象 的 message 时 间 进 行 监视 ， 
实现 代码 如 下 。 


window.addEventListener ("message"，function(){.-}，false) 。 


想 要 发 送 消 息 ， 可 以 使 用 window 对 象 的 postMessage() 方 法 来 实现 ， 该 方法 的 实现 代码 
如 下 。 


otherWindow.postMessage (message，targetOrigin) 。 


说 明 : postMessage 是 HTML 5 为 了 解决 跨 文档 通信 ， 特 别 引 入 的 一 个 新 的 API， 目 前 支 
持 这 个 API 的 浏览 器 有 IE(8.0 以 上 )、Firefox、 Opera、Safari 和 Chrome。 

postMessage 允许 页 面 中 的 多 个 iame/window 的 通信 ，postMessage 也 可 以 实现 AJAX 直 
接 跨 域 ， 不 通过 服务 器 端 代理 。 


9.1.2 ”案例 1 一 一 跨 文档 通信 应 用 测试 


下 面 来 介绍 一 个 跨 文档 通信 的 应 用 案例 ， 其 中 主要 使 用 postMessage( 方 法 来 实现 该 案 
例 。 具 体操 作 方法 如 下 。 
需要 创建 两 个 文档 来 实现 跨 文档 的 访问 ， 名 称 分 别 为 9.1.html 和 9.2.html。 
ED 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 ， 以 创建 用 于 实现 信息 发 送 的 9.1.html 文 
档 ， 有 具体 代码 如 下 。 

















<1DOCTYPE HTML> 

<html> 

<head> 
<title> 跨 域 文档 通信 1</title> 
<meta charset="utf-8"/> 

</head> 

<script type="text/javascript"> 
window.onload = function() { 


全 i 





a 


本 


document .getElementById('title') .innerHTML 所 ”页 面 在， 
document . Location-host + " 域 中 ， 且 每 过 1 秒 向 9.2.html 文档 发 送 一 个 消息 ! '; 
// 定 时 向 另外 一 个 不 确定 域 的 文件 发 送 消息 
setInterval (function(){ 

var message = ' 消 息 发 送 测 试 ! gnbsp; gnbsp; ' + (new Date() .getTime()); 
window.parent.frames[0] .postMessage (message, '*'); 

},1000); 
] 
</script> 
<body> 
<div id="title"></div> 
</body> 
</html> 


国保 存 记事 本 文件 ， 然 后 使 用 浏览 器 打开 该 文件 ， 最 终 效果 如 图 9-1 所 示 。 


过 口 x 
| 疗 壹 代 而 hog\9.1.html -0 | 关 四 这 文档 通信 1 x 
文件 (月 入 强 (各 看 (V) ”收藏 夫 (A) 工具 (T) 帮助 (H) 
页 面 在 域 中 ， 且 每 过 1 秒 向 9. 2. html 文 档 发 送 一 个 消息 ! 


水 进 这 让 就 qeM_ 翰 6 哄 a 











GG 


图 9-1 程序 运行 结果 


EECSRS 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 ， 以 创建 用 于 实现 信息 监听 的 9.2.html 文 
档 ， 具 体 代码 如 下 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 跨 域 文档 通信 2</title> 
<meta charset="utf-8"/> 
</head> 





<script type="text/javascript"> 
window.onload = function() { 


document .getElementById('title') .innerHTML = 页面 在 :3 
document .location.host + ' 域 中 ， 且 每 过 1 秒 向 9.1.html 文档 发 送 一 个 消息 ! '; 
// 定 时 向 另外 一 个 不 同 域 的 iframe 发 送 消息 
setInterval (function(){ 
var message = ' 消 息 发 送 测 试 ! gnbsp; gnbsp; ' + (new Date() .getTime()); 
window.parent.frames[0] .postMessage (message, '*'); 
}v1000) 7 


Var onmessage = function(e) { 
var data = e.data,p = document -createElement ('p'); 
p.innerHTML = data; 
document .getElementById('display') .appendChild(p); 
人 
// 监 听 postMessage 消息 事件 


Gi 
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if (typeof window.addEventListener != 'undefined') { 
window.addEventListener('message', onmessage, false); 
} else if (typeof window.attachEvent != "undefined') { 


window.attachEvent ('onmessage', onmessage); 


3 
] 
</script> 


<body> 

<div id="title"></div> 
<br> 

<div id="display"></div> 
</body> 

</html> 


在 下 浏览 器 中 运行 9.2.html 文件 ， 效 果 如 图 9-2 所 示 。 


- DO x 
司 但 代码 hog\.2html DC | 居 革 六 村 .| 夺 四 所， x 
文件 (F) 编 句 (E) 查看 (V) 收藏 闪 A) 工具 (T) 帮助 (H) 
页 面 在 域 中 ， 且 每 过 1 秒 向 9. 1. htal 文 档 发 送 一 个 消息 ! 











图 9-2 程序 运行 结果 
在 9.1.html 文件 中 的 “window.parent.frames[0].postMessage(message,*'); ”语句 中 的 “*” 
号 表示 不 对 访问 的 域 进行 判断 。 如 果 要 加 入 特定 域 的 限制 ， 可 以 将 代码 改 为 
“window.parent.frames[0].postMessage(message，mrl);” 其 中 的 url 必须 为 完整 的 网 站 域名 格 
式 。 而 在 信息 监听 接收 方 的 onmessage 中 需要 追加 一 个 判断 语句 “iflevent.origin !== url) 
return;” 。 
| 由 于 在 实际 通信 时 ， 应 当 实 现 双 向 的 通信 ， 所 以 在 编写 代码 时 ， 每 一 个 文档 中 者 


提示 
汇 ”应 该 具有 发 送信 息 和 监听 接收 信息 的 模块 。 


9.2 ”WebSocket API 概述 
HTML 5 中 有 一 个 很 实用 的 新 特性 WebSocket。 浏 览 器 通过 JavaScript 向 服务 器 发 出 建立 
WebSocket 连接 的 请 求 ， 连 接 建 立 以 后 ， 客 户 端 和 服务 器 端 就 可 以 通过 TCP 连接 直接 交换 数 
据 。 本 章节 将 详细 学 习 WebSocket 的 使 用 方法 和 技巧 。 
9.2.1 什么 是 WebSocket API 
WebSocket API 是 下 一 代 客 户 端 -服务 器 的 异步 通信 方法 。 该 通信 取代 了 单个 的 TCP 套 接 


字 ， 使 用 ws 或 wss 协议 ， 可 用 于 任意 的 客户 端 和 服务 器 程序 。WebSocket 目前 由 W3C 进行 
标准 化 ， 已 经 受到 Firefox 4、Chrome 4、Opera 10.70 以 及 Safari 5 等 浏览 器 的 支持 。 

WebSocket API 最 伟大 之 处 在 于 服务 器 和 客户 端 可 以 在 给 定 的 时 间 范 围 内 的 任意 时 刻 ， 相 
互 推送 信息 。WebSocket 并 不 限于 以 AJAX( 或 XHR) 方 式 通信 ， 因 为 AJAX 技术 需要 客户 端 发 
起 请 求 ， 而 WebSocket 服务 器 和 客户 端 可 以 彼此 相互 推送 信息 ; XHR 受到 域 的 限制 ， 而 
WebSocket 允许 跨 域 通信 。 

AJAX 技术 很 好 的 一 点 是 没有 设计 要 使 用 的 方式 。WebSocket 为 指定 目标 创建 ， 用 于 双向 
推送 消息 。 


9.2.2 ”WebSocket 通信 基础 


1. 产生 WebSocket 的 背景 
随 着 即时 通信 系统 的 普及 ， 基 于 Web 的 实时 通信 也 变 得 普及 ， 如 新 浪 微 博 的 评论 、 私 信 
的 通知 ， 腾 讯 的 Web QQ 等 ， 如 图 9-3 所 示 。 
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图 9-3 腾讯 Web QQ 页 面 


在 WebSocket 出 现 之 前 ， 一 般 通 过 两 种 方式 来 实现 Web 实时 应 用 : 轮 询 机 制 和 流 技术 ， 
而 其 中 的 轮 询 机 制 又 可 分 为 普通 轮 询 和 长 轮 询 (Coment)， 分 别 介绍 如 下 。 

。 轮 询 : 这 是 最 早 的 一 种 实现 实时 Web 应 用 的 方案 。 客 户 端 以 一 定 的 时 间 间 隔 向 服务 
端 发 出 请 求 ， 以 频繁 请 求 的 方式 来 保持 客户 端 和 服务 器 端的 同步 。 这 种 同步 方案 的 
缺点 是 ， 当 客户 端 以 固定 频率 向 服务 器 发 起 请 求 的 时 候 ， 服 务 器 端的 数据 可 能 并 没 
有 更 新 ， 这 样 会 带 来 很 多 无 谓 的 网 络 传输 ， 所 以 这 是 一 种 非常 低 效 的 实时 方案 。 

”长 轮 询 : 是 对 定时 轮 询 的 改进 和 提高 ， 目 的 是 为 了 降低 无 效 的 网 络 传输 。 当 服务 器 
端 没有 数据 更 新 的 时 候 ， 连 接 会 保持 一 段 时 间 周期 直到 数据 或 状态 改变 或 者 时 间 过 
期 ， 通 过 这 种 机 制 来 减少 无 效 的 客户 端 和 服务 器 间 的 交互 。 当 然 ， 如 果 服 务 端的 数 
据 变更 非常 频繁 的 话 ， 这 种 机 制 和 定时 轮 询 比 较 起 来 没有 本 质 上 的 性 能 提高 。 


= 
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@ ” 流 : 就 是 在 客户 端的 页 面 ， 使 用 一 个 隐藏 的 窗口 向 服务 端 发 出 一 个 长 连接 的 请 求 。 
服务 器 端 接 到 这 个 请 求 后 作出 回应 并 不 断 更 新 连接 状态 以 保证 客户 端 和 服务 器 端的 
连接 不 过 期 。 通 过 这 种 机 制 可 以 将 服务 器 端的 信息 源源 不 断 地 推 向 客户 端 。 这 种 机 
制 在 用 户 体验 上 有 一 点 问题 ， 需 要 针对 不 同 的 浏览 器 设计 不 同 的 方案 来 改进 用 户 体 
验 ， 同 时 这 种 机 制 在 并 发 比较 大 的 情况 下 ， 对 服务 器 端的 资源 是 一 个 极 大 的 考验 。 

上 述 3 种 方式 实际 看 来 都 不 是 真实 的 实时 通信 技术 ， 只 是 相对 的 模拟 出 来 实时 的 效果 ， 


这 种 效果 的 实现 对 于 编程 人 员 来 说 无 疑 增加 了 复杂 性 ， 对 于 客户 端 和 服务 器 端的 实现 都 需要 
复杂 的 HTTP 链接 设计 来 模拟 双向 的 实时 通信 。 这 种 复杂 的 实现 方法 制约 了 应 用 系统 的 扩展 性 。 





基于 上 述 商 端 ， 在 HTML 5 中 增加 了 实现 Web 实时 应 用 的 技术 WebSocket。WebSocket 





通过 浏览 器 提供 的 API 真正 实现 了 具备 像 C/S 架构 下 的 桌面 系统 的 实时 通信 和 能力。 其 原理 是 
使 用 JavaScript 调用 浏览 器 的 API 发 出 一 个 WebSocket 请 求 至 服务 器 ， 经 过 一 次 握手 ， 和 服 
务 器 建立 了 TCP 通信 ， 因 为 其 本 质 上 是 一 个 TCP 连接 ， 所 以 数据 传输 的 稳定 性 较 强 且 数 据 传 
输 量 比较 小 。 由 于 HTML 5 中 WebSocket 的 实用 ， 使 其 具备 了 Web TCP 的 称号 。 


2. WebSocket 技术 的 实现 方法 


WebSocket 技术 本 质 上 是 一 个 基于 TCP 的 协议 技术 ， 其 建立 通信 链接 的 操作 步骤 如 下 。 

为 了 建立 一 个 WebSocket 连接 ， 客 户 端的 浏览 器 首先 要 向 服务 器 发 起 一 个 
HTTP 请 求 ， 这 个 请 求 和 通常 的 HTTP 请 求 有 所 差异 ， 除 了 包含 一 般 的 头 信息 外 ， 还 
有 一 个 附加 的 信息 Upgrade: WebSocket， 表 明 这 是 一 个 申请 协议 升级 的 HTTP 请 求 。 

ET 服务 器 端 解析 这 些 附加 的 头 信 息 ， 经 过 验证 后 ， 产 生 应 答 信息 返回 给 客户 端 。 

本 了 BY 客户 端 接收 返回 的 应 答 信息 ， 建 立 与 服务 器 端的 WebSocket 连接 ， 之 后 双方 就 
可 以 通过 这 个 连接 通道 自由 地 传递 信息 ， 并 且 这 个 连接 会 持续 存在 ， 直 到 客户 端 或 
者 服务 器 端的 某 一 方 主动 关闭 连接 。 

WebSocket 技术 目前 是 属于 比较 新 的 技术 ， 其 版 本 更 新 较 快 ， 目 前 的 最 新 版 本 基本 上 可 


以 被 Chrome、FireFox、Opera 和 IE(9.0 以 上 ) 等 浏览 器 支持 。 


在 建立 实时 通信 时 ， 客 户 端 发 到 服务 器 的 内 容 如 下 。 


GET /chat HTTP/1.1 

Host: server.example.com 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25j2Q== 

Origin: http://example.com 

Sec-WebSocket-Protocol: chat, superchat8.Sec-WebSocket-Version: 13 


从 服务 器 返回 到 客户 端的 内 容 如 下 。 


HTTP/1.1 101 Switching Protocols 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+x00o= 
Sec-WebSocket-Protocol: chat 


说 明 : 其 中 的 Upgrade:WebSocket 表示 这 是 一 个 特殊 的 HTTP 请 求 ， 请 求 的 目的 就 是 要 





将 客户 端 和 服务 器 端的 通信 协议 从 HITP 协议 升级 到 WebSocket 协议 。 其 中 客户 端的 Sec- 


0 


WebSocket-Key 和 服务 器 端的 Sec-WebSocket-Accept 就 是 重要 的 握手 认证 信息 ， 实 现 握 导 
才 可 以 进一步 地 进行 信息 的 发 送 和 接收 。 


9.2.3 ”案例 2 一 一 服务 器 端 使 用 WebSocket API 


在 实现 WebSocket 实时 通信 时 ， 需 要 使 客户 端 和 服务 器 端 建立 连接 ， 需 要 配置 相应 的 内 
容 ， 一 般 构建 连接 握手 时 ， 客 户 端的 内 容 浏览 器 都 可 以 代劳 完成 ， 主 要 实现 的 是 服务 器 端的 
内 容 ， 下 面 来 看 一 下 WebSocket API 的 具体 使 用 方法 。 

服务 器 端 需要 编程 人 员 自 己 来 实现 ， 目 前 市 场 上 可 直接 使 用 的 开源 方法 比较 多 ， 主 要 有 
以 下 5 种 。 

@ Kaazing WebSocket Gateway: 是 一 个 Java 实现 的 WebSocket Server。 

@ mod pywebsocket: 是 一 个 Python 实现 的 WebSocket Server。 

@ Netty: 是 一 个 Java 实现 的 网 络 框架 ， 其 中 包括 了 对 WebSocket 的 支持 。 

@ nodejs: 是 一 个 Server 端的 JavaScript 框架 ， 提 供 了 对 WebSocket 的 支持 。 

@ WebSocket4Net: 是 一 个 NET 的 服务 器 端 实现 。 

除了 使 用 以 上 开源 的 方法 外 ， 自 己 编写 一 个 简单 的 服务 器 端 也 是 可 以 的 。 其 中 服务 器 端 
需要 实现 握手 、 接 收 和 发 送 3 个 内 容 。 

下 面 就 来 详细 介绍 一 下 操作 方法 。 

1. 握手 


在 实现 握手 时 需要 通过 Sec-WebSocket 信息 来 实现 验证 。 使 用 Sec-WebSocket-Key 和 一 
个 随机 值 构成 一 个 新 的 key 串 ， 然 后 将 新 的 key 串 SHA1 编码 ， 生 成 一 个 由 多 组 两 位 十 六 进 
制 数 构成 的 加 密 串 ， 最 后 再 把 加 密 串 进行 base64 编码 生成 最 终 的 key， 这 个 key 就 是 Sec- 
WebSocket- Accept。 

实现 Sec-WebSocket-Key 运算 的 实例 代码 如 下 。 


/// <summary> 

/// 生成 Sec-Websocket-Accept 

/// </summary> 

/// <param name="handShakeText"> 客 户 端 握手 信息 </param> 

/// <returns>Sec-WebSocket-Accept</returns> 

private static string GetSecKeyAccetp(byte[] handshakeBytes,int bytesLength) 
{ 


a 
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string handShakeText = Encoding.UTF8.GetString (handShakeBytes，0， 
bytesLength); 

string key = string.Empty; 

Regex r = new Regex(@"Sec\-WebSocket\-Key: (.*?)\r\n"); 

Match m = r.Match (handshakeText); 

if (m.Groups.Count != 0) 

{ 
key = Regex.Replace (m.Value, @"Sec\-WebSocket\-Key: (.*?)\r\n", "$1").Trim(); 

} 

byte[] encryptionstring = SHA1.Create () .ComputeHash 
(Encoding.ASCII.GetBytes (key + "258EAFAS5-E914-47DA-95CA-C5ABODC85B11")); 

return Convert.ToBase64String (encryptionstring); 


} 
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2. 接收 


如 果 握 手 成 功 ， 将 会 触发 客户 端的 onopen 事件 ， 进 而 解析 接收 的 客户 端 信息 。 在 进行 数 
据 信息 解析 时 ， 会 将 数据 以 字 节 和 比特 的 方式 拆 分 ， 并 按照 以 下 规则 进行 解析 。 


(1) 第 lbyte 
@ 1bit: frame-fin，x0 表示 该 message 后 续 还 有 frame; xl 表示 是 message 的 最 后 一 个 
frame。 


@ 3bit: 分 别 是 fame-rsv1、frame-rsv2 和 frame-rsv3， 通 常 都 是 x0。 

@ 4bit: frame-opcode，x0 表示 是 延续 frame; xl 表示 文本 frame; x2 表示 二 进 制 
frame; x3~x7 保留 给 非 控制 frame; x8 表示 关闭 连接 ，x9 表示 ping; xA 表示 
pong; xB-F 保留 给 控制 fame。 

(2) 第 2byte 

@ “1bit: Mask，1 表示 该 frame 包含 掩 码 ; 0， 表 示 无 掩 码 。 

@ 7bit、7bitt2byte、7bit+8byte: 7bit 取 整 数值 ， 若 在 0 一 145 之 间 ， 则 是 负载 数据 长 
度 ; 若是 146， 表 示 后 两 个 byte 取 无 符号 16 位 整数 值 ， 是 负载 长 度 ，147 表示 后 8 
个 byte， 取 64 位 无 符号 整数 值 ， 是 负载 长 度 。 

(3) 第 3 一 6byte 

这 里 假定 负载 长 度 在 0 一 145 之 间 ， 并 且 Mask 为 1， 则 这 4 个 byte 是 掩 码 。 

(4) 第 7 一 endbyte 

长 度 是 上 面 取出 的 负载 长 度 ， 包 括 扩展 数据 和 应 用 数据 两 部 分 ， 通 常 没 有 扩展 数据 ;， 若 

Mask 为 1， 则 此 数据 需要 解码 ， 解 码 规则 为 1 一 4byte 掩 码 循 环 和 数据 byte 做 异 或 操作 。 

实现 数据 解析 的 代码 如 下 。 

/// <summary> 

/// 解析 客户 端 数据 包 

/// </summary> 

/// <param name="recBytes"> 服 务 器 接收 的 数据 包 </param> 

/// <param name="recByteLength"> 有 效 数据 长 度 </param> 

/// <returns></returns> 


private static string RnalyticData (byte[] recBytes, int recByteLength) 
{ 








if (recByteLength < 2) { return string.Empty; } 
bool fin = (recBytes[0] & 0x80) == 0x80; // 1lbit，1 表示 最 后 一 帧 
二 ET 人 下 2 
return string.Empty;// 超过 一 帧 暂 不 处 理 
} 


bool mask flag = (recBytes[1] & 0x80) == 0x80; // 是 否 包含 拖 码 
if (!mask flag){ 
return string.Empty; // 不 包含 掩 码 的 暂 不 处 理 
. 
int payload len = recBytes[1] & 0x7F; // 数据 长 度 


byte[] masks = new byte[4]7 
byte[] payload data; 
if (payload len == 146){ 
Array.Copy (recBytes, 4, masks, 0, 4); 
payload len = (UInt16) (recBytes[2] << 8 | recBytes[3]); 


G's6 


payload data = new byte[payload len]; 

Array.Copy (recBytes, 8, payload data, 0, payload len); 
}else if (payload len == 147){ 

Array.Copy (recBytes, 10, masks, 0, 4); 

byte[] uInt64Bytes = new byte[8]; 

For (int t=" 07 1 < By 13+){ 
uInt64Bytes[i] = recBytes[9 - i]; 

} 

UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0); 

payload data = new byte[len]; 

£0r (UINE64 = 07F i < leny i++)1{ 
payload datal[lil] = recBytes[i + 14]; 

’ 
}elsef{ 

Array.Copy (recBytes, 2, masks, 0, 4); 

payload data = new byte[payload len]; 

Array.Copy (recBytes, 6, payload data, 0, payload len); 
for (var i = 0; i < payload len; i++){ 

payload data[i]l = (byte) (payload data[il ^ masks[i % 4]); 
return Encoding.UTF8.GetString (payload data);56.} 


3. 发 送 数据 


服务 器 端 接收 并 解析 了 客户 端 发 来 的 信息 后 ， 要 返回 回应 信息 ， 
0x81 开头 ， 紧 接 发 送 内 容 的 长 度 ， 最 后 是 内 容 的 byte 数组 。 
实现 数据 发 送 的 代码 如 下 。 


/// <summary> 

/// 打包 服务 器 数据 

/// </summary> 

/// <param name="message"> 数 据 </param> 

/// <returns> 数 据 包 </returns> 

private static byte[] PackData(string message) 

{ 
byte[] contentBytes = null; 
byte[] temp = Encoding.UTF8.GetBytes (message); 
if (temp.Length < 146){ 

contentBytes = new byte[temp.Length + 2]; 

contentBytes[0] = 0x81; 

contentBytes[1] = (byte)temp.Length; 

Array.Copy (temp, 0, contentBytes, 2, temp.Length); 
}else if (temp.Length < OxFFFF){ 

contentBytes = new byte[temp.Length + 4]; 

contentBytes[0] = 0x81; 

contentBytes[1] 146; 

contentBytes[2] (byte) (temp.Length & OxFF); 

contentBytes[3] = (byte) (temp.Length >> 8 & OxFF); 

Array.Copy (temp, 0, contentBytes, 4, temp.Length); 
}elsef 

// 暂 不 处 理 超 长 内 容 


return contentBytes; 


服务 器 发 送 的 数据 以 
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9.2.4 案例 3 一 一 客户 机 端 使 用 WebSocket API 


一 般 浏览 器 提供 的 API 就 可 以 直接 用 来 实现 客户 端的 握手 操作 了 ， 在 应 用 时 直接 使 用 
JavaScript 来 调用 即 可 。 
客户 端 调用 浏览 器 API， 实 现 握手 操作 的 JavaScript 代码 如 下 。 


var wsServer = 'Wws://localhost:8888/Demo';  // 服 务 器 地 址 





Var websocket = new WebSocket (wsServer); // 创 建 Websocket 对 象 

websocket .send ("hello"); // 向 服务 器 发 送 消息 

alert (websocket.readyState) 7 // 查 看 Websocket 当前 状态 
websocket .onopen = function (evt) { // 己 经 建立 连接 

}; 

websocket .onclose = function (evt) { // 已 经 关闭 连接 

]} 

websocket .onmessage = function (evt) { // 收 到 服务 器 消息 ， 使 用 evt .data 提取 
] 7 

websocket .onerror = function (evt) { // 产 生 异 常 


}; 


9.3 综合 案例 一 一 编写 简单 的 WebSocket 服务 器 


在 9.2 节 中 介绍 了 WebSocket API 的 原理 及 基本 使 用 方法 ， 提 到 在 实现 通信 时 关键 要 配置 
的 是 WebSocket 服务 器 ， 下 面 就 来 介绍 一 个 简单 的 WebSocket 服务 器 编写 方法 。 

为 了 实现 操作 ， 这 里 配合 编写 一 个 客户 端 文件 ， 以 测试 服务 器 的 实现 效果 。 

EET 首先 编写 客户 端 文件 ， 其 文件 代码 如 下 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>WebSocket test</title> 
<script src="jquery-min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
Var WwWS7 
function ToggleConnectionClicked() { 
try { 
ws = new WebSsocket ("ws://192.168.1.101:1818/chat");// 连 接 服务 器 
ws .onopen = function (event) {alert ("已 经 与 服务 器 建立 了 连接 \r\n 
当前 连接 状态 : "+this.readystate);}; 
ws.onmessage = function(event) {alert ("接收 到 服务 器 发 送 的 数据 : 
\r\n"tevent .data);}; 
ws.onclose = function(event) {alert ("已 经 与 服务 器 断 开 连 接 \r\n 
当前 连接 状态 : "+this.readystate);}; 
ws.onerror = function (event) {alert ("Websocket 异常 ! ") ; }; 
} catch (ex) { 
alert (ex.message); 


} 
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function SendData() { 
try{ 
ws.send("jane"); 
}catch (ex) { 
alert (ex.message); 
] 
function seestate(){ 
alert (ws.readySstate); 
} 
</script> 
</head> 
<body> 
<button id='ToggleConnection' type="button™" onclick= 
"ToggleConnectionCclicked()7 > 与 服务 器 建立 连接 </button><br /><br /> 
<button id='"'ToggleConnection' type="button" onclick='SendData(); '> 发 
送信 息 : 我 的 名 字 是 jane</button><br /><br /> 
<button id='ToggleConnection' type="button" onclick='seestate();' > 查 
看 当前 状态 </button><br /><br /> 
</body> 
</html> 


程序 运行 效果 如 图 9-4 所 示 。 
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9-4 “程序 运行 结果 


en 其 中 ws.onopen、ws.onmessage、ws.onclose 和 Ws.onerror 对 应 了 4 种 状态 的 提示 
信息。 在 连接 服务 器 时 ， 需 要 在 代码 中 指定 服务 器 的 连接 地 址 ， 测 试 时 将 IP 地 址 改 
为 本 机 下 即 可 。 


服务 器 程序 可 以 使 用 .NET 等 实现 编辑 ， 编 辑 后 服务 器 端的 主 程序 代码 如 下 。 


using System; 

using System.Net; 

using System.Net.Sockets; 

using System.Security.Cryptography; 
using System.Text; 

using System.Text.RegularExpressions; 
namespace WebSocket 


{ 





class Program 
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static void Main(string[] args) 
{ 
int port = 2828; 
byte[] buffer = new byte[1024]; 
IPEndPoint localEP = new IPEndPoint (IPAddress.Any, port); 


Socket listener = new Socket (localEP.Address.AddressFamily, 
SocketType.Stream, ProtocolType.Tcp); 
tryt{ 


listener.Bind(localEP); 

listener.Listen(10); 

Console.WriteLine ("等 待 客户 端 连接 ..…") ; 

Socket sc = listener.Accept();// 接 收 一 个 连接 

Console.WriteLine ("接收 到 了 客户 端 : "+ 
sc.RemoteEndPoint.ToString() +" 连 接 .… 

// 握 手 

int length = sc.Receive (buffer) ;// 接 收 客户 端 握手 信息 

sc.Send(PackHandSshakeData (GetSecKeyAccetp (buffer, length))); 

Console.WriteLine ("已 经 发 送 握手 协议 了 ..."); 

// 接 收 客户 端 数据 

Console.WriteLine (" 等 待 客 户 端 数据 …") ; 

length = sc.Receive (buffer) ;// 接 收 客户 端 信息 

string clientMsg=AnalyticData (buffer, length); 

Console .WriteLine ("接收 到 客户 端 数 据 : " + clientMsg); 

// 发 送 数据 

string sendMsg = "您 好 , " + clientMsg7 

Console.WriteLine ("发 送 数 据 : “"+sendMsg+"” 至 客户 端 ..") 7 

sc.Send(PackData (sendMsg)); 

Console.WriteLine ("演示 Over!"); 








); 


} 
catch (Exception e) 
Console .WriteLine (e.ToString()) 7 





/// <summary> 
/// 打包 服务 器 数据 
/// </summary> 
/// <param name="message"> 数 据 </param> 
/// <returns> 数 据 包 </returns> 
Private static byte[] PackData(string message) 
{ 
byte[] contentBytes = null; 
byte[] temp = Encoding.UTF8.GetBytes (message); 
if (temp.Length < 146){ 
contentBytes = new bytel[temp.Length + 2]; 
contentBytes[0] = 0x81; 
contentBytes[1] = (byte)temp.Length; 
Array.Copy (temp, 0, contentBytes, 2, temp.Length); 
}else if (temp.Length < OxFFFF){ 
contentBytes = new bytel[temp.Length + 4]; 
contentBytes[0] = 0x81; 
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contentBytes [1] 1467 
contentBytes[2] (byte) (temp.Length & OxFF); 
contentBytes[3] (byte) (temp.Length >> 8 & OxFF); 
Array.Copy (temp, 0, contentBytes, 4, temp.Length); 
}elsef{ 


// 暂 不 处 理 超 长 内 容 


} 


return contentBytes; 


庆 湾 染 醒 沿 qe 人 NA_ 贡 6 溃 


} 

由 于 代码 内 容 较 多 ， 中 间 部 分 内 容 省 略 ， 编 辑 后 保存 服务 器 文件 目录 。 

EEIe 测试 服务 器 和 客户 端的 连接 通信 ， 首 先 打开 服务 器 ,运行 随 书 光盘 
ch09\9.3\WWebSocket-Server\WebSocket\obj\x86\Debug\WebSocket.exe 文件 ， 提 示 等 待 





























客户 端 连接 ， 效 果 9-5 所 示 。 
运行 客户 端 文件 (ch09\9.3\WWebSocket-Client\index.html)， 效 果 如 图 9-6 所 示 。 
[二 Fe 区 司 NN 

IE NS 
与 服务 刻 镜 接 
发 运 我 的 名 字 : beaton 
得 看 杖 态 
eo 2 

9-5 ”等 待 客户 端 连 接 9-6 ”程序 运行 结果 


EGG 单 击 【 与 服务 器 链接 】 按 钮 ， 服 务 器 端 显 示 已 经 建立 连接 ， 客 户 端 提示 连接 建 
立 ， 且 状态 为 1， 效果 如 图 9-7 所 示 。 





9-7 ”程序 运行 结果 








ETB> 单 击 【 发 送 消息 】 按 钮 ， 自 服务 器 端 返 回信 息 ， 提 示 “ 您 好 ，jane”， 如 图 9-8 
所 示 。 
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图 9-8 程序 运行 结果 


9.4 高 手 甜 点 


甜点 1: WebSocket 将 会 替代 什么 ? 


WebSocket 可 以 替代 Long Polling(PHP 服务 端 推送 技术 )。 客 户 端 发 送 一 个 请 求 到 服务 
器 ， 现 在 ， 服 务 器 端 并 不 会 响应 还 没准 备 好 的 数据 ， 它 会 保持 连接 的 打开 状态 直到 最 新 的 数 
据 准备 发 送 就 绪 ， 之 后 客户 端 收 到 数据 ， 然 后 发 送 另 一 个 请 求 。Long-Polling 的 好 处 在 于 减少 
任 一 连接 的 延迟 ， 当 一 个 连接 已 经 打开 时 就 不 需要 创建 男 一 个 新 的 连接 。 但 是 Long-Polling 
并 不 是 什么 “花哨 ”技术 ， 其 仍 有 可 能 发 生 请 求 暂停 ， 因 此 会 需要 建立 新 的 连接 。 


甜点 2: WebSocket 的 优势 在 哪里 ? 


它 可 以 实现 真正 的 实时 数据 通信 。 众 所 周知 ，B/S 模式 下 应 用 的 是 HTTP 协议 ， 是 无 状态 
的 ， 所 以 不 能 保持 持续 地 连接 。 数 据 交 换 是 通过 客户 端 提交 一 个 Request 到 服务 器 端 ， 然 后 服 
务 器 端 返回 一 个 Response 到 客户 端 来 实现 的 。 而 WebSocket 则 通过 HTTP 协议 的 初始 握手 阶 
段 然 后 升级 到 WebSocket 协议 以 支持 实时 数据 通信 。 

WebSocket 可 以 支持 服务 器 主动 向 客户 端 推 送 数据 。 一 旦 服务 器 和 客户 端 通过 
WebSocket 建立 起 连接 ， 服 务 器 便 可 以 主动 向 客户 端 推 送 数据 ， 而 不 像 普通 的 Web 传输 方式 
需要 先 由 客户 端 发 送 Request 才能 返回 数据 ， 从 而 增强 了 服务 器 的 能 力 。 

WebSocket 协议 设计 了 更 为 轻 量 级 的 Header， 除 了 首次 建立 连接 的 时 候 需 要 发 送 头 部 和 
普通 Web 连接 类 似 的 数据 之 外 ， 建 立 WebSocket 连接 后 ， 相 互 沟通 的 Header 会 非常 简洁 ， 
大 大 减少 了 元 余 的 数据 传输 。 

WebSocket 提供 了 更 为 强大 的 通信 能 力 和 更 为 简洁 的 数据 传输 平台 ， 能 更 方便 地 完成 
Web 开发 中 的 双向 通信 功能 。 











9.5” 跟 我 练 练 手 


练习 1: 跨 文档 消息 传输 。 
练习 2: 编写 简单 的 WebSocket 服务 器 。 
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网 页 离线 应 用 程序 是 实现 离线 Web 应 用 的 重要 技术 ， 目 前 已 有 的 离线 Web 应 


用 程序 很 多 。 通 过 本 章 的 学 习 ， 读 者 能 够 掌握 HTML 5 离线 应 用 程序 的 基础 知识 ， 
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10.1 HTML 5 离线 Web 应 用 概述 


在 HTML 5 中 ， 新 增 了 本 地 缓存 ， 也 就 是 HTML 离线 Web 应 用 ， 主 要 是 通过 应 用 程序 
缓存 整个 离线 网 站 的 HTML、CSS、JavaScript、 网 站 图 像 和 资源 。 当 服务 器 没有 和 Internet 建 
立 连 接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 

另外 ， 如 果 网 站 发 生 了 变化 ， 应 用 程序 缓存 将 重新 加 载 变化 的 数据 文件 。 

浏览 器 网 页 缓存 与 本 地 缓存 的 主要 区 别 如 下 。 

@ 浏览 器 网 页 缓存 主要 是 为 了 加 快 网 页 加 载 的 速度 ， 所 以 会 对 每 一 个 打开 的 网 页 都 进 

行 缓存 操作 ， 而 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 只 缓存 那些 指定 缓存 的 网 页 。 
e 在 网 络 连接 的 情况 下 ， 浏 览 器 网 页 缓存 一 个 页 面 的 所 有 文件 ， 但 是 一 旦 离线 ， 用 户 
单 击 链接 时 ， 将 会 得 到 一 个 错误 消息 。 而 本 地 缓存 在 离线 时 ， 仍 然 可 以 正常 访问 。 

e@ ”对 于 网 页 浏览 者 而 言 ， 浏 览 器 网 页 缓存 了 哪些 内 容 和 资源 ， 这 些 内 容 是 否 安全 可 靠 
等 都 不 知道 ， 而 本 地 缓存 的 页 面 是 编程 人 员 指 定 的 内 容 ， 所 以 在 安全 方面 相对 可 靠 
了 许多 。 

















10.2 ”使 用 HTML 5 离线 Web 应 用 API 
离线 Web 应 用 较为 普遍 ， 下 面 来 详细 介绍 离线 Web 应 用 的 构成 与 实现 方法 。 
10.2.1 案例 1 一 一 检查 浏览 器 的 支持 情况 


不 同 的 浏览 器 版 本 对 Web 离线 应 用 技术 的 支持 情况 是 不 同 的 ， 如 表 10-1 所 示 为 常见 浏览 
器 对 Web 离线 应 用 的 支持 情况 。 


表 10-1 浏览 器 对 Web 离线 应 用 的 支持 情况 表 

















浏览 器 名 称 支持 Web 存储 技术 的 版 本 情况 
Internet Explorer Intemet Explorer 9 及 更 低 版 本 目前 尚 不 支持 
Firefox Firefox 3.5 及 更 高 版 本 
Opera Opera 10.6 及 更 高 版 本 
Safari Safari 4 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 
Android Android 2.0 及 更 高 版 本 





使 用 离线 Web 应 用 API 前 最 好 先 检查 浏览 器 是 否 支 持 。 检 查 浏览 器 是 否 支 持 的 代码 如 下 。 


if (windows.applicationcache){ 


// 浏 览 器 支持 离线 应 用 } 
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10.2.2 ”案例 2 一 一 搭建 简单 的 离线 应 用 程序 
为 了 使 一 个 包含 HTML 文档 、CSS 样式 表 和 JavaScript 脚本 文件 的 单 页 面 应 用 程序 支持 
离线 应 用 ， 需 要 在 HTML 5 元 素 中 加 入 manifest 特性 。 具 体 实现 代码 如 下 。 


<!doctype html> 
<html manifest=”123.manifest”> 








</html> 


执行 以 上 代码 可 以 提供 一 个 存储 的 缓存 空间 ， 但 是 还 不 能 完成 离线 应 用 程序 的 使 用 ， 需 
要 指明 哪些 资源 可 以 享用 这 些 缓存 空间 ， 即 需要 提供 一 个 缓冲 清单 文件 。 有 具体 实现 代码 如 下 。 

CHCHE MANIFEST 

index.html 

123.js 

123.css 

123 .gif 


以 上 代码 中 指明 了 4 种 类 型 的 资源 对 象 文件 构成 缓冲 清单 。 


10.2.3 ”案例 3 一 一 支持 离线 行为 


要 支持 离线 行为 ， 首 先 要 能 够 判断 网 络 连接 状态 ， 在 HIML 5 中 引入 了 一 些 判 断 应 用 程序 
网 络 连接 是 否 正常 的 新 的 事件 。 对 应 应 用 程序 的 在 线 状 态 和 离线 状态 会 有 不 同 的 行为 模式 。 

用 于 实现 在 线 状态 监测 的 是 window.navigator 对 象 的 属性 。 其 中 的 navigator.online 属性 
是 一 个 标明 浏览 器 是 否 处 于 在 线 状态 的 布尔 属性 ， 当 online 值 为 rue 时 ， 并 不 能 保证 Web 应 
用 程序 在 用 户 的 机 器 上 一 定 能 访问 到 相应 的 服务 器 ， 而 当 其 值 为 false 时 ， 不 管 浏览 器 是 否 真 
正 联网 ， 应 用 程序 都 不 会 尝试 进行 网 络 连接 。 

监测 页 面 状态 是 在 线 还 是 离线 的 具体 代码 如 下 。 

// 页 面 加 载 的 时 候 ， 设 置 状 态 为 online 或 offline 


Function loaddemo(){ 
If (navigator.online) { 
Log (“online”); 
} else { 
Log (“offline”); 
} 


} 

// 添 加 事件 监听 器 ， 在 线 状态 发 生变 化 时 ， 触 发 相应 动作 
Window.addeventlistener (“online”,function€eé{ 
}, true); 





Window.addeventlistener (“offline”,function(e) { 
Log (“offline”); 
} true) 7 


2 上 述 代 码 可 以 在 Internet Explorer 浏览 器 中 使 用 。 
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10.2.4 ”案例 4 一 一 Manifest 文件 


那么 客户 端的 浏览 器 是 如 何 知道 应 该 缓存 哪些 文件 呢 ? 这 就 需要 依靠 manifest 文件 来 管 
理 。manifest 文件 是 一 个 简单 的 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需 
要 被 缓存 的 资源 文件 的 文件 名 称 ， 以 及 这 些 资源 文件 的 访问 路 径 。 

manifest 文件 把 指定 的 资源 文件 类 型 分 为 3 类 ， 分 别 是 CACHE 、NETWORK 和 
FALLBACK。 这 3 类 的 含义 分 别 如 下 。 

@ CACHE 类 别 : 该 类 别 指定 需要 被 缓存 在 本 地 的 资源 文件 。 这 里 需要 特别 注意 的 是 : 

如 果 为 某 个 页 面 指 定 需 要 本 地 缓存 的 资源 文件 时 ， 不 需要 把 这 个 页 面 本 身 指定 在 
CACHE 类 型 中 ， 因 为 如 果 一 个 页 面具 有 manifest 文件 ， 浏 览 器 会 自动 对 这 个 页 面 进 
行 本 地 缓存 。 

@ NETWORK 类别: 该 类 别 为 不 进行 本 地 缓存 的 资源 文件 ， 这 些 资源 文件 只 有 当 客 户 

端 与 服务 器 端 建立 连接 的 时 候 才能 访问 。 
@ FALLBACK 类 别 : 该 类 别 中 指定 两 个 资源 文件 ， 其 中 一 个 资源 文件 为 能 够 在 线 访问 
时 使 用 的 资源 文件 ， 另 一 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 

以 下 是 一 个 简单 的 manifest 文件 的 内 容 。 

CACHE MANIFEST 

# 文 件 的 开头 必须 是 CACHE MANIFEST 

CACHE : 


10.1.html 

myphoto.jpg 

10.php 

NETWORK: 

http://www.baidu.com/xxx 

feifei.php 

FALLBACK: 

online.js locale.js 

上 述 代 码 含义 分 析 如 下 。 

ee 指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 文 
件 为 独立 的 一 行 。 

ee 第 一 行 必须 是 CACHE MANIFEST， 此 行 的 作用 告诉 浏览 器 需要 对 本 地 缓存 中 的 资 
源 文件 进行 具体 设置 。 

ee 每 一 个 类 型 都 是 必须 出 现 ， 而 且 同 一 个 类 别 可 以 重复 出 现 。 如 果 文 件 开头 没有 指定 
类 别 而 直接 书写 资源 文件 的 时 候 ， 浏 览 器 把 这 些 资源 文件 视 为 CACHE 类 别 。 

@ ”在 manifest 文件 中 ， 注 释 行 以 “# ”开始 ， 主 要 用 于 进行 一 些 必要 的 说 明 或 解释 。 

为 单个 网 页 添加 manifest 文件 时 ， 需 要 在 Web 应 用 程序 页 面 上 的 HTML 元 素 的 manifest 

属性 中 ， 指 定 manifest 文件 的 URL 地 址 。 具 体 代码 如 下 。 


<html manifest="123.manifest"> 
</html> 
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添加 上 述 代码 后 ， 浏 览 器 就 能 够 正常 地 阅读 该 文本 文件 。 

用 户 可 以 为 每 一 个 页 面 单独 指定 一 个 manifest 文件 ， 也 可 以 对 整个 Web 应 用 程 
序 指定 一 个 总 的 manifest 文件 。 

上 述 操 作 完 成 后 ， 即 可 实现 资源 文件 缓存 到 本 地 。 当 要 对 本 地 缓存 区 的 内 容 进 行 修改 
时 ， 只 需要 修改 manifest 文件 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 
更 新 本 地 缓存 区 中 的 内 容 。 


Dp 
了 提示 








10.2.5 ”案例 5 一 一 Application Cache API 


传统 的 Web 程序 中 浏览 器 也 会 对 资源 文件 进行 Cache， 但 并 不 是 很 可 靠 ， 有 时 起 不 到 预 
期 的 效果 。 而 HIML 5 中 的 Application Cache 支持 离线 资源 的 访问 ， 为 离线 Web 应 用 的 开发 
提供 了 可 能 。 

使 用 Application Cache API 的 好 处 有 以 下 几 点 。 

e@ ”用 户 可 以 在 离线 时 继续 使 用 。 

@ ”缓存 到 本 地 ， 节 省 带宽 ， 加 速 用 户 体验 的 反馈 。 

e ”减轻 服务 器 的 负载 。 

ApplicationCache API 是 一 个 操作 应 用 缓存 的 接口 ， 是 Windows 对 象 的 直接 子 对 象 
window.applicationcache。window.applicationcache 对 象 可 触发 一 系列 与 缓存 状态 相关 的 事件 ， 
具体 事件 如 表 10-2 所 示 。 








表 10-2 window.applicationcache 对 象 事件 表 



















































checking 用 户 代 理 检 查 更 新 或 者 在 第 一 次 尝试 下 | noupdate, downloading. obsolet 
载 manifest 文件 的 时 候 ， 本 事件 往往 是 | e, error 
事件 队列 中 第 一 个 被 触发 的 
检测 出 manifest 文件 没有 更 新 无 
downloading Event 用 户 代 理发 现 更 新 并 且 正 在 获取 资源 ， progress. error. cached., updater 
或 者 第 一 次 下 载 manifest 文件 列表 中 列 | eady 
举 的 资源 
progress Progress 用 户 代理 正在 下 载 资源 manifest 文件 中 | progress, error, cached, updater 
Event 需要 缓存 的 资源 eady 
cached Event manifest 中 列举 的 资源 已 经 下 载 完成 ， 无 
并 且 已 经 缓存 
updateready Event manifest 中 列举 的 文件 已 经 重新 下 载 并 | 无 
更 新 成 功 ， 接 下 来 JavaScript 可 以 使 用 
swapCache0 方 法 更 新 到 应 用 程序 中 
obsolete Event manifest 的 请 求 出 现 404 或 者 410 错 | 无 
误 ， 应 用 程序 缓存 被 取消 


全 


珂 岂 99M 号 沙 型 艇 土 ” 需 01 由 





GG 


看 
17 售 


APP 和 移动 网 站 开发 


案例 课堂 9 一 





此 外 ， 没 有 可 用 更 新 或 者 发 生 错误 时 ， 还 有 一 些 表示 更 新 状态 的 事件 如 下 。 


Onerror 
Onnoupdate 
Onprogress 


该 对 象 有 一 个 数值 型 属性 window.applicationcache.status， 代 表 了 缓存 的 状态 。 缓 存 状态 
共有 6 种 ， 如 表 10-3 所 示 。 


表 10-3 ”缓存 的 状态 表 





数值 型 属性 
0 UNCACHED 
1 IDLE 
2 CHECKING 
3 DOWNLOADING 
4 
5 








UPDATEREADY 
OBSOLETE 





window.applicationcache 有 3 个 方法 ， 如 表 10-4 所 示 。 


表 10-4 window.applicationcache 方法 表 


发 起 应 用 程序 缓存 下 载 进 程 


取消 正在 进行 的 缓存 下 载 
切换 成 本 地 最 新 的 缓存 环境 





说 明 : 调用 update() 方 法 会 请 求 浏览 器 更 新 缓存 ， 包 括 检查 新 版 本 的 manifest 文件 并 下 载 
必要 的 新 资源 。 如 果 没 有 缓存 或 者 缓存 已 过 期 ， 则 会 抛 出 错误 。 


10.3 使 用 HTML 5 离线 Web 应 用 构建 应 用 
下 面 结合 上 述 内 容 的 学 习 来 构建 一 个 离线 Web 应 用 程序 ， 具 体内 容 如 下 。 
10.3.1 案例 6 一 一 创建 记录 资源 的 manifest 文件 


首先 要 创建 一 个 缓冲 清单 文件 123.manifest， 文 件 中 列 出 了 应 用 程序 需要 缓存 的 资源 。 具 
体 实现 代码 如 下 。 

CACHE MANIFEST 

# javascript 

./offline.js 

Ch vk Wt 

-/1og.js 


全 171s 


#stylesheets 
/CSS.css 


#images 


10.3.2 ”案例 7 一 一 创建 构成 界面 的 HTML 和 CSS 


下 面 来 实现 网 页 结构 ， 其 中 需要 指明 程序 中 用 到 的 JavaScript 文件 和 CSS 文件 ， 并 且 还 
要 调用 manifest 文件 。 具 体 实现 代码 如 下 。 


<!IDOCTYPE html > 

<html lang="en" manifest="]123.manifest"> 
<head> 

<title> 创 建构 成 界面 的 HTML 和 css</title> 
<script src="1og.js"></script> 

<script src="offline.js"></script> 
<sCript ‘grc="123.49"></acript> 

<link rel="stylesheet" href="CSS.css" /> 
</head> 


<body> 
<header> 
<h1>Web 离线 应 用 </h1> 
</header> 
<section> 
<article> 
<button id="installbutton">check for updates</button> 
<h3>1og</h3> 
<div id="info"> 
</div> 
</article> 
</section> 
</body> 
</html> 
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重 上 述 代码 中 有 两 点 需要 注意 ， 其 一 ， 因 为 使 用 了 manifest 特性 ， 所 以 HTML 元 
证 。 素 不 能 省 略 (为 了 使 代码 简洁 ，HTML 5 中 允许 省 咯 不 必要 的 HTML 元 素 ); 其 二 ， 代 
码 中 引入 了 按钮 ， 其 功能 是 允许 用 户 手动 安装 Web 应 用 程序 ， 以 支持 离线 情况 。 


10.3.3 ”案例 8 一 一 创建 离线 的 JavaScript 


在 网 页 设计 中 经 常会 用 到 JavaScript 文件 ， 该 文件 通过 <script> 标 签 引入 网 页 。 在 执行 离 
线 Web 应 用 时 ， 这 些 JavaScript 文件 也 会 一 并 存储 到 缓存 中 。 
FE 
/* 
* 记 录 window.applicationcache 触发 的 每 一 个 事件 
on 


window.applicationcache.onchecking = 


Lb 
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function(e) { 

log("checking for application update"™); 
window.applicationcache.onupdateready = 
function(e) { 

log("application update ready"); 

. 
window.applicationcache.onobsolete 
Eunction(e) 

log("application obsolete") 7 
window.applicationcache.onnoupdate 
function (e) 

log("no application update found"); 

} 
window.applicationcache.oncached = 
function(e) 

log("application cached"); 

. 
window.applicationcache.ondownloading = 
function (e) 

log("downloading application update"); 
window.applicationcache.onerror = 
function(e) { 

log("online"); 

}, true); 








/* 
* 将 applicationcache 状态 代码 转换 成 消息 
bt 
showcachestatus = function(n) { 

statusmessages = ["uncached","idle","checking","downloading","update 
ready", "obsolete"]; 

return statusmessages[n]; 
| 
install = function(){ 

log("checking for updates"); 

try { 

window.applicationcache.update(); 

} catch (e) { 

applicationcache.onerror(); 


} 
onload = function(e) { 
// 检 测 所 需 功 能 的 浏览 器 支持 情况 
if(!window.applicationcache) { 
log("HTML 5 offline applications are not supported in your browser."); 
return; 
. 
if(!window.localstorage) { 
log("HTML 5 local storage not supported in your browser."™); 
return; 
} 


if(!Inavigator.geolocation) { 


log("HTML 5 geolocation is not supported in your browser-") 7 
return; 
log("initial cache status: "+ 
showcachestatus (window.applicationcache.status)); 
document .getelementbyid("installbutton") .onclick = checkfor; 


} 


<log.js> 
log = function() { 
Var p = document.createelement ("p"); 
Var message = array.prototype.join.call (arguments," "); 
P.innerhtml = message 
document .getelementbyid("info") .appendchild(p); 


10.3.4 ”案例 9 一 一 检查 applicationCache 的 支持 情况 


applicationCache 对 象 并 非 所 有 浏览 器 都 可 以 支持 ， 所 以 在 编辑 时 需要 加 入 浏览 器 支持 性 


检测 功能 ， 并 提醒 浏览 者 页 面 无 法 访问 是 浏览 器 兼容 问题 。 具 体 实 现代 码 如 下 。 


onload = function(e) { 
// 检测 所 需 功能 的 浏览 器 支持 情况 
if (!window.applicationcache) { 
1og(" 您 的 浏览 器 不 支持 HTML 5 offline Applications "); 
return; 
} 
if (!window.localstorage) { 
1og ("您 的 浏览 器 不 支持 HTML 5 Local Storage "); 
return; 
和 
if (!window.WebSocket) { 
1og(" 您 的 浏览 器 不 支持 HTML 5 Websocket "); 
return; 
} 
if (!navigator.geolocation) { 
1og ("您 的 浏览 器 不 支持 HTML 5 Geolocation ") 
return; 
log("lnitial cache status:" + 
showCachestatus (window.applicationcache.status)); 
document .getelementbyld("installbutton") .onclick = install; 


上 


10.3.5 ”案例 10 





为 Update 按钮 添加 处 理 函 数 





下 面 来 设置 Update 按钮 的 行为 函数 ， 该 函数 功能 为 执行 更 新 应 用 缓存 。 有 具体 实现 代码 

















如 下 。 


Install = function() 1{ 
Log (“checking for updates”); 
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Try{ 
Window.applicationcache.update(); 

} catch (e) { 
Applicationcache.onerror(): 


说 明 : 单 击 按钮 后 将 检查 缓存 区 ， 并 更 新 需要 更 新 的 缓存 资源 。 当 所 有 可 用 更 新 都 下 载 
完毕 之 后 ， 将 向 用 户 界面 返回 一 条 应 用 程序 安装 成 功 的 提示 信息 ， 接 下 来 用 户 就 可 以 在 离线 
模式 下 运行 了 。 


10.3.6 ”案例 11 一 一 添加 storage 功能 代码 


当 应 用 程序 处 于 离线 状态 时 ， 需 要 将 数据 更 新 写 入 本 地 存储 ， 本 实例 使 用 storage 实现 该 
功能 ， 因 为 当 上 传 请 求 失败 后 可 以 通过 storage 得 到 恢复 。 如 果 应 用 程序 遇 到 某 种 原因 导致 的 
网 络 错误 ， 或 者 应 用 程序 被 关闭 的 时 候 ， 数 据 会 被 存储 以 便 下 次 再 进行 传输 。 

实现 storage 功能 的 具体 代码 如 下 。 


Var storelocation =function(latitude, longitude){ 

// 加 载 localstorage 的 位 置 列表 

Var locations = json.pares (localstorage.locations || “[]”); 

// 添 加 地 理 位 置 数据 

Locations.push({“latitude” : latitude, “longitude” : longitude}); 

// 保 存 新 的 位 置 列表 

Localstorage。 Locations = json.stringify(locations); 

由 于 localstorage 可 以 将 数据 存储 在 本 地 浏览 器 中 ， 特 别 适 用 于 具有 离线 功能 的 应 用 程 
序 ， 所 以 本 实例 中 使 用 其 来 保存 坐标 。 本 地 存储 中 的 缓存 数据 在 网 络 连接 恢复 正常 后 ， 应 用 
程序 会 自动 与 远程 服务 器 进行 数据 同步 。 


10.3.7 案例 12 一 一 添加 离线 事件 处 理 程序 


对 于 离线 Web 应 用 程序 ， 在 使 用 时 要 结合 当前 状态 执行 特定 的 事件 处 理 程序 ， 本 实例 中 
的 离线 事件 处 理 程序 设计 如 下 。 

(1) 如 果 应 用 程序 在 线 ， 事 件 处 理 函 数 会 存储 并 上 传 当前 坐标 。 

(2) 如 果 应 用 程序 离线 ， 事 件 处 理 函 数 只 存储 不 上 传 。 

(3) 当 应 用 程序 重新 连接 到 网 络 后 ， 事 件 处 理 函 数 会 在 UI 上 显示 在 线 状态 ， 并 在 后 台 上 
传 之 前 存储 的 所 有 数据 。 

具体 实现 代码 如 下 。 


Window.addeventlistener (“online”, function(e){ 
Log (“online”); 
}, true); 











Window.addeventlistener (“offline”, function(e) { 
Log (“offline”); 
}: true); 


如 果 网 络 连接 状态 在 应 用 程序 没有 真正 运行 的 时 候 可 能 会 发 生 改 变 。 例 如 ， 用 户 关 闭 了 


浏览 器 ， 刷 新 页 面 或 跳 转 到 了 其 他 网 站 。 为 了 应 对 这 些 情 况 ， 离 线 应 用 程序 在 每 次 页 面 加 载 
时 都 会 检查 与 服务 器 的 连接 状况 。 如 果 连 接 正 常 ， 会 尝试 与 远程 服务 器 同步 数据 。 


If (navigator.online){ 
Uploadlocations (); 


} 
最 后 ， 在 下 浏览 器 中 预览 效果 如 图 10-1 所 示 。 
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图 10-1 程序 运行 结果 


10.4 高 手 甜 点 


甜点 1: 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 


在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 ， 如 果 用 户 使 用 的 
是 下 浏览 器 ， 那 么 Web 存储 工作 时 ， 所 有 数据 将 存储 在 正 的 Web 存储 库 中 ， 如 果 用 户 再 次 
使 用 Firefox 浏览 器 访问 该 站 点 ， 将 不 能 读 取 正 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 
是 分 开 并 独立 工作 的 。 


甜点 2: 离线 存储 站 点 时 是 否 需要 浏览 者 同意 ? 


和 地 理 定位 类 似 ， 在 网 站 使 用 manifest 文件 时 ， 浏 览 器 会 提供 一 个 权限 提示 ， 提 示 用 户 
是 否 将 离线 设 为 可 用 ， 但 并 不 是 每 一 个 浏览 器 都 支持 这 样 的 操作 。 


10.5” 跟 我 练 练 手 


练习 1: 使 用 HTML 5 离线 Web 应 用 API。 
练习 2: 使 用 HTML 5 离线 Web 应 用 构建 应 用 。 
练习 3: 使 用 HTML 5 的 离线 定位 跟踪 技术 。 
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CSS 3 美化 网 页 
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CSS 3 概述 与 基本 语法 
使 用 CSS 3 美化 网 页 字体 与 段落 
使 用 CSS 3 美化 表格 和 表单 样式 
美化 图 片 、 背 景 和 边框 


一 个 美观 大 方 简约 的 页 面 以 及 高 访问 量 的 网 站 ， 是 网 页 设计 者 的 追求 
仅 通过 HTML 5 实现 是 非常 困难 的 ，HTML 语言 仅仅 定义 了 网 页 结构 ， 对 
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APP 和 移动 网 站 开发 
一 案例 课堂 四 一 





11.1 CSS 3 概述 


使 用 CSS 3 最 大 的 优势 是 ， 在 后 期 维护 中 如 果 一 些 外 观 样式 需要 修改 ， 只 需要 修改 相应 
的 代码 即 可 。 本 节 重 点 学 习 CSS3 的 基本 概念 。 





11.1.1 CSS 3 功能 


随 着 Internet 不 断 发 展 ， 对 页 面 效果 诉求 越 来 越 强烈 ， 只 依赖 HTML 这 种 结构 化 标记 实 
现 样 式 ， 已 经 不 能 满足 网 页 设计 者 的 需要 。 其 表现 有 下 面 几 个 方面 。 

e@ 维护 困难 ， 为 了 修改 某 个 特殊 标记 格式 ， 需 要 花费 很 多 时 间 ， 尤 其 对 整个 网 站 而 

言 ， 后 期 修改 和 维护 成 本 较 高 。 

e@ ”标记 不 足 ，HTML 本 身 的 标记 十 分 少 ， 很 多 标记 都 是 为 网 页 内 容 服务 ， 而 关于 内 容 

样式 标记 ， 如 文字 间距 、 段 落 缩 进 很 难 在 HTML 中 找到 。 

e 网 页 过 于 腾 肿 ， 由 于 没有 统一 对 各 种 风格 样式 进行 控制 ，HTML 页 面 往往 体积 过 

大 ， 占 用 了 很 多 宝贵 的 宽度 。 
e ”定位 困难 ， 在 整体 布局 页 面 时 ，HTML 对 于 各 个 模块 的 位 置 调整 显得 捉襟见肘 ， 过 
多 的 <table> 标 记 将 会 导致 页 面 的 复杂 和 后 期 维护 的 困难 。 

在 这 种 情况 下 ， 就 需要 寻找 一 种 可 以 将 结构 化 标记 与 丰富 的 页 面 表现 相 结合 的 技术 。 
CSS 样式 技术 就 产生 了 。 

CSS(Cascading Style Sheet)， 称 为 层 合 样式 表 ， 也 可 以 称 为 CSS 样式 表 或 样式 表 ， 其 文件 
扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标 
记性 语言 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离开 ， 从 而 使 网 页 
设计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 将 整个 站 点 上 所 有 网 页 都 指向 某 
个 CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 
改变 。 


11.1.2 ”浏览 器 与 CSS 3 


CSS 3 制定 完成 之 后 ， 具 有 了 很 多 新 功能 ， 即 新 样式 。 但 这 些 新 样式 在 浏览 器 中 不 能 获 
得 完全 支持 。 主 要 在 于 各 个 浏览 器 对 CSS 3 的 很 多 细节 处 理 上 存在 差异 ， 例 如 ， 一 种 标记 的 
某 个 属性 ， 一 种 浏览 器 支持 而 另外 一 种 浏览 器 不 支持 ， 或 者 两 者 浏览 器 都 支持 ， 但 其 显示 效 
果 不 一 样 。 

各 主流 浏览 器 ， 为 了 自己 产品 的 利益 和 推广 ， 定 义 了 很 多 私有 属性 ， 以 便 加 强 页 面 显示 
样式 和 效果 ， 导 致 现在 每 个 浏览 器 都 存在 大 量 的 私有 属性 。 虽 然 使 用 私有 属性 可 以 快速 构建 
效果 ， 但 对 网 页 设计 者 是 一 个 很 大 的 麻烦 ， 设 计 一 个 页 面 ， 就 需要 考虑 在 不 同 浏览 器 上 显示 
的 效果 ， 一 不 注意 就 会 导致 同一 个 页 面 在 不 同 浏览 器 上 的 显示 效果 不 一 致 ， 甚 至 有 的 浏览 器 
的 不 同 版 本 之 间 ， 也 具有 不 同 的 属性 。 





如 果 所 有 浏览 器 都 支持 CSS 3 样式 ， 那 么 网 页 设计 者 只 需要 使 用 一 种 统一 标记 ， 就 会 在 
不 同 的 浏览 器 上 ， 显 示 统 一 的 样式 效果 。 

当 CSS 3 被 所 有 浏览 器 接受 和 支持 的 时 候 ， 整 个 网 页 设计 将 会 变 得 非常 容易 ， 其 布局 更 
加 合理 ， 样 式 更 加 美观 ， 到 那个 时 候 ， 整 个 Web 页 面 显示 会 焕然 一 新 。 虽 然 现在 CSS 3 还 没 
有 完全 普及 ， 各 个 浏览 器 对 CSS 3 支持 还 处 于 发 展 阶段 ， 但 CSS 3 是 一 个 新 的 ， 具 有 发 展 潜 
力 很 高 的 技术 ， 在 样式 修饰 方面 ， 是 其 他 技术 无 可 蔡 代 的 。 此 时 学 习 CSS 3 技术 ， 这 样 才能 
保证 技术 不 落伍 。 


11.1.3 ”CSS 3 基础 语法 


CSS 3 样式 表 是 由 若干 条 样式 规则 组 成 ， 这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 来 
定义 它们 显示 的 外 观 。 每 一 条 样式 规则 由 3 部 分 构成 : 选择 符 (selector)、 属 性 (properties) 和 属 
性 值 (value)， 基 本 格式 如 下 。 


selector{property: value} 


@ selector 选择 符 可 以 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标记 ， 例 如 <body>、 
<table>、<p> 等 ， 但 是 也 可 以 是 XML 文档 中 的 标记 。 

@ ”property 属性 则 是 选择 符 指定 的 标记 所 包含 的 属性 。 

@ value 指定 了 属性 的 值 。 如 果 定 义 选择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 
组 之 间 用 分 号 () 隔 开 ， 基 本 格式 如 下 。 


selector{propertyl: valuel; property2: Value27.… } 


下 面 就 给 出 一 条 样式 规则 ， 如 下 所 示 。 

p{color:red} 

该 样式 规则 是 选择 符 p， 为 段落 标记 <p> 提 供 样式 ，color 为 指定 文字 的 颜色 属性 ，red 为 
属性 值 。 此 样式 表示 标记 <p> 指 定 的 段落 文字 为 红色 。 

如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 。 


pftfont-family:" 隶 书 "; color:red; font-size:40px; font-weight:bold} 





11.1.4 CSS 3 常用 单位 


CSS 3 当中 常用 的 单位 包括 颜色 单位 与 长 度 单位 两 种 ， 利 用 这 些 单位 可 以 完成 网 页 元 素 
的 搭配 与 网 页 布局 的 设 定 ， 如 网 页 图 片 颜色 的 搭配 、 网 页 表格 长 度 的 设 定 等 。 

1. 闫 色 单 位 

通常 使 用 颜色 设 定 字体 以 及 背景 的 颜色 显示 ， 在 CSS 3 中 颜色 设置 的 方法 很 多 ， 有 命名 
颜色 、RGB 颜色 、 十 六 进 制 颜色 、 网 络 安全 色 ， 相 比较 于 以 前 版 本 ，CSS 3 新 增 了 HSL 色彩 
模式 、HSLA 色彩 模式 、RGBA 色彩 模式 。 

(1) 命名 颜色 

CSS 3 中 可 以 直接 用 英文 单词 命名 与 之 相应 的 颜色 ， 这 种 方法 的 优点 是 简单 、 直 接 、 容 
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易 掌握 。 此 处 预 设 了 16 种 颜色 以 及 这 16 种 颜色 的 衍生 色 ， 这 16 种 颜色 是 CSS 3 规范 推荐 
的 ， 而 且 一 些 主流 的 浏览 器 都 能 够 识别 它们 ， 如 表 11-1 所 示 。 


表 11-1 CSS 推荐 颜色 























颜 色 颜 色 名 称 
aqua 黑 
blue 紫红 
Bray 绿 
lime 褐 
navy 橄榄 
purple 红 
silver 深 青 
white 黄 








这 些 颜 色 最 初 来 源 于 基本 的 Windows VGA 颜色 ， 而 且 浏览 器 还 可 以 识别 这 些 颜 色 。 例 
如 ， 在 CSS 定义 字体 颜色 时 ， 便 可 以 直接 使 用 这 些 颜 色 的 名 称 。 


p{color:red} 


直接 使 用 颜色 的 名 称 简单 、 直 接 而 且 不 容易 忘记 。 但 是 ， 除 了 这 16 种 颜色 外 ， 还 可 以 使 
用 其 他 CSS 预定 义 的 颜色 。 多 数 浏 览 器 大 约 能 够 识别 140 多 种 颜色 名 ， 其 中 包括 这 16 种 颜 
色 ， 如 ，orange、PaleGreen 等 。 


提示 在 不 同 的 浏览 器 中 ， 命 名 颜色 种 类 也 是 不 同 的 ， 即 使 使 用 了 相同 的 颜色 名 ， 它 们 
半 ”的 闫 色 也 有 可 能 存在 差异 ， 所 以 ， 虽 然 每 种 浏览 器 都 命名 了 大 量 的 颜色 ， 但 是 这 些 大 
色 大 多 数 在 其 他 浏览 器 上 却 是 不 能 识别 的 ， 而 真正 通用 的 标准 颜色 只 有 16 种 。 

(2) RGB 颜色 

如 果 要 使 用 十 进 制 表示 颜色 ， 则 需要 使 用 RGB 颜色 。 十 进 制 表示 颜色 ， 最 大 值 为 255， 
最 小 值 为 0。 要 使 用 RGB 颜色 ， 必 须 使 用 rgb(R,G,B)， 其 中 RR、G、B 分 别 表 示 红 、 绿 、 蓝 的 
十 进 制 值 ， 通 过 这 3 个 值 的 变化 结合 ， 便 可 以 形成 不 同 的 颜色 。 例 如 ，rgb(255,0,0) 表 示 红 
色 ，rgb(0,255,0) 表 示 绿 色 ，rgb(0,0,255) 则 表示 蓝 色 。 黑 色 表示 为 rgb(0,0,0)， 则 白色 可 以 表示 
为 rgb(255,255,255)。 

RGB 设置 方法 一 般 分 为 两 种 :百分比 设置 和 直接 用 数值 设置 ， 如 将 p 标记 设置 颜色 ， 有 
以 下 两 种 方法 。 

p{color:rgb(123,0,25)} 

p{color:rgb(45%,0%,25%)} 

这 两 种 方法 里 ， 都 是 用 3 个 值 表示 “ 红 ”“ 绿 ”和 “ 蓝 ”3 种 颜色 。 这 3 种 基本 色 的 取 值 
范围 都 是 0~255。 通 过 定义 这 3 种 基本 色 分 量 ， 可 以 定义 出 各 种 各 样 的 颜色 。 

(G3) 十 六 进 制 颜色 

当然 ， 除 了 CSS 预定 义 的 颜色 外 ， 设 计 者 为 了 使 页 面色 彩 更 加 丰富 ， 可 以 使 用 十 六 进 制 











SU 








的 颜色 和 RGB 颜色 。 十 六 进 制 颜色 的 基本 格式 为 梳 RGGBB， 其 中 R 表示 红色 ，G 表示 绿 
色 ，B 表示 蓝 色 。 而 RR、GG、BB 最 大 值 为 FF， 表 示 十 进 制 中 的 255， 最 小 值 为 00， 表 示 。 齐 
十 进 制 中 的 0。 例 如 ， 考 F0000 表示 红色 ，#00FF00 表示 绿色 ，#0000FF 表示 蓝 色 。#000000 吕 
表示 黑色 ， 那 么 白色 的 表示 就 是 本 FFFFF， 而 其 他 颜色 分 别 是 通过 这 3 种 基本 色 的 结合 而 形 。 名 
成 的 。 例 如 ， 考 FFF00 表示 黄色 ， 寿 FOOFF 表示 紫红 色 。 可 
对 于 浏览 器 不 能 识别 的 颜色 名 称 ， 就 可 以 使 用 需要 颜色 的 十 六 进 制 值 或 RGB 值 。 如 表 11-2 
所 示 ， 列 出 了 几 种 常见 的 预定 义 颜色 值 的 十 六 进 制 值 和 RGB 值 。 本 
表 11-2 颜色 对 照 表 法 
颜色 名 十 六 进 制 值 RGB 值 
红色 #EF0000 Tgb(255.0.0 
橙色 #EF6600 Tgb(255.102.0 RN 
黄色 #FFFF00 Tgb(255.255.0 
绿色 #00FFO00 Tgb(0.255.0 NN 
蓝 色 #0000FF rgb(0.0.255 NS 
紫色 #800080 Tgb(128.0.128 
紫红 色 #FFOOFF Tgb(255.0.255) 
水 绿色 #0OFFFF rgb(0.255.255 
灰色 #808080 rgb(128.128.128 
褐色 #800000 rgb(128.0.0 
橄榄 色 #808000 rgb(128.128.0) 
深蓝 色 #000080 rgb(0.0.128, 
银色 #COCOCO rgb(192.192.192 
深 青 色 #008080 Tgb(0.128.128 
白色 #FEFFFFF Tgb(255.255.255 
黑色 #000000 Tgb(0.0.0 





(4) HSL 色彩 模式 

CSS 3 新 增加 了 HSL 颜色 表现 方式 。HSL 色彩 模式 是 工业 界 的 一 种 颜色 标准 ， 通 过 对 色 
调 (H)、 饱 和 度 (S)、 亮 度 (L)3 个 颜色 通道 的 改变 ， 以 及 它们 相互 之 间 的 合 加 来 获得 各 种 颜色 。 
这 个 标准 几乎 包括 了 人 类 视力 可 以 感知 的 所 有 颜色 ， 在 屏幕 上 可 以 重 现 16777216 种 颜色 ， 是 
目前 运用 最 广 的 颜色 系统 之 一 。 

在 CSS 3 中 ，HSL 色彩 模式 的 表示 语法 如 下 。 


hsl (<length> ，<percentage> , <percentage>) 


hsl0 函 数 的 3 个 参数 如 表 11-3 所 示 。 
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表 11-3 hsl() 函 数 属性 说 明 表 








属性 名 称 说 明 
length 表示 色调 (Hue)。Hue 衍生 于 色 盘 ， 取 值 可 以 为 任意 数值 ， 其 中 0( 或 360， 或 -360) 表 示 红 
色 ，60 表示 黄色 ，120 表示 绿色 ，180 表示 青色 ，240 表示 蓝 色 ，300 表示 洋红 ， 当 然 可 
以 设置 其 他 数值 来 确定 不 同 的 颜色 





percentage 表示 饱和 度 (Saturation)， 表 示 该 色彩 被 使 用 了 多 少 ， 即 颜色 的 深浅 程度 和 鲜艳 程度 。 取 
值 为 0% 到 100% 之 间 的 值 ， 其 中 0% 表 示 灰 度 ， 即 没有 使 用 该 颜色 ，100% 的 饱和 度 最 
高 ， 即 颜色 最 鲜艳 

percentage 表示 亮度 (Lightness)。 取 值 为 0% 到 100% 之 间 的 值 ， 其 中 0% 最 暗 ， 显 示 为 黑色 ，50% 表 
示 均 值 ，100% 最 亮 ， 显 示 为 白色 


其 使 用 示例 如 下 。 

p{color:hsl (0,80%,80%);} 

p{color:hsl (80,80%,80%);} 

(5) HSLA 色彩 模式 

HSLA 也 是 CSS 3 新 增 的 颜色 模式 ，HSLA 色彩 模式 是 HSL 色彩 模式 的 扩展 ， 在 色相 、 
饱和 度 、 亮 度 3 要 素 的 基础 上 增加 了 不 透明 度 参数 。 使 用 HSLA 色彩 模式 ， 设 计 师 能 够 更 灵 
活 地 设计 不 同 的 透明 效果 。 其 语法 格式 如 下 。 


hsla(<length> , <percentage> , <percentage> ，<opacity>) 


其 中 前 3 个 参数 与 hsl0 函 数 的 参数 意义 和 用 法 相同 ， 第 4 个 参数 <opacity> 表 示 不 透明 
度 ， 取 值 在 0 一 1 之 间 。 使 用 示例 如 下 。 


p{color:hsla(0,80%,80%,0.9);} 


(6) RGBA 色彩 模式 
RGBA 也 是 CSS 3 新 增 的 颜色 模式 ，RGBA 色彩 模式 是 RGB 色彩 模式 的 扩展 ， 在 红 、 
绿 、 蓝 3 原色 的 基础 上 增加 了 不 透明 度 参数 。 其 语法 格式 如 下 。 


rgba(r，g ，b ，<opacity>) 


其 中 r、g、b 分 别 表示 红色 、 绿 色 和 蓝 色 3 种 原色 所 占 的 比重 。r、g、b 的 值 可 以 是 正 
整数 或 者 百分数 ， 正 整数 值 的 取 值 范围 为 0 一 255， 百 分 数值 的 取 值 范围 为 0.0% 一 100.0%， 超 
出 范围 的 数值 将 被 截至 其 最 接近 的 取 值 极限 。 注 意 ， 并 非 所 有 浏览 器 都 支持 使 用 百分数 值 。 
第 4 个 参数 <opacity> 表 示 不 透明 度 ， 取 值 在 0 一 1 之 间 。 使 用 示例 如 下 。 


Plcolor:rgba(0r 23r123750.9)31} 


(7) 网 络 安全 色 

网 络 安全 色 由 216 种 颜色 组 成 ， 被 认为 在 任何 操作 系统 和 浏览 器 中 都 是 相对 稳定 的 ， 也 
就 是 说 显示 的 颜色 是 相同 的 ， 因 此 这 216 种 颜色 被 称 为 “网 络 安全 色 ”。 这 216 种 颜色 都 是 
由 红 、 绿 、 蓝 3 种 基本 色 从 0、51、102、153、204、255 这 6 个 数值 中 取 值 ， 组 成 的 6x6x6 
种 颜色 。 





























2. 长 度 单位 
为 保证 页 面 元 素 能 够 在 浏览 器 中 完全 显示 ， 又 要 布局 合理 ， 就 需要 设 定 元 素 间 的 间距 ， 
及 元 素 本 身 的 边界 等 ， 这 都 离 不 开 长 度 单位 的 使 用 。 在 CSS 3 中 ， 长 度 单位 可 以 被 分 为 两 
类 : 绝对 单位 和 相对 单位 。 
(1) 绝对 单位 
绝对 单位 用 于 设 定 绝对 位 置 ， 主 要 有 下 列 5 种 绝对 单位 。 
@ ”英寸 (in); 英寸 对 于 中 国 设计 而 言 使 用 比较 少 ， 主 要 是 国外 常用 的 量度 单位 。1 英寸 
等 于 2.54 厘米 ， 而 1 厘米 等 于 0.394 英寸 。 
e@ ”厘米 (cm): 厘米 是 常用 的 长 度 单位 ， 可 以 用 来 设 定 距离 比较 大 的 页 面 元 素 框 。 
e ”毫米 (mm): 毫米 可 以 用 来 比较 精确 地 设 定 页 面 元 素 的 距离 或 大 小 。10 毫米 等 于 
1 厘米 。 
@ 磅 (pb: 一 般 用 来 设 定 文字 的 大 小 ， 是 标准 的 印刷 量度 ， 广 泛 应 用 于 打印 机 、 文 字 程 
序 等 。72 磅 等 于 1 英寸 ， 也 就 是 说 等 于 2.54 厘米 。 另 外 ， 英 寸 、 厘 米 和 毫米 也 可 以 
用 来 设 定 文字 的 大 小 。 
@ ”pica(pc): 是 另 一 种 印刷 量度 。1pica 等 于 12 磅 ， 该 单位 不 经 常 使 用 。 
(2) 相对 单位 
相对 单位 是 指 在 量度 时 需要 参照 其 他 页 面 元 素 的 单位 值 。 使 用 相对 单位 所 量度 的 实际 距 
离 可 能 会 随 着 这 些 单位 值 的 改变 而 改变 。CSS 3 提供 了 3 种 相对 单位 : em、ex 和 px。 
@ em: 在 CSS 3 中 ，em 用 于 给 定 字 体 的 font-size 值 ， 例 如 ， 一 个 元 素 字 体 大 小 为 
12pt， 那 么 lem 就 是 12pt， 如 果 该 元 素 字体 大 小 改 为 15pt， 则 lem 就 是 15pt。 简 单 
来 说 ， 无 论 字 体 大 小 是 多 少 ，lem 总 是 字体 的 大 小 值 。em 的 值 总 是 随 着 字体 大 小 的 
变化 而 变化 的 。 
例如 ， 分 别 设 定 页 面 元 素 hl、h2 和 的 字体 大 小 为 20pt、15pt 和 10pt， 各 元 素 的 左边 距 
为 lam， 样 式 规则 如 下 。 
hi{font-size:20pt} 
h2{font-size:15pt} 
p{font-size:10pt} 
hl,h2,p{margin-left:1em} 
对 于 hl1，lem 等 于 20pt; 对 于 h2，lem 等 于 15pt; 对 于 p，lem 等 于 10pt， 所 以 em 的 
值 会 随 着 相应 元 素 字 体 大 小 的 变化 而 变化 的 。 
另外 ，em 值 有 时 还 相对 于 其 上 级 元 素 的 字体 大 小 。 例 如 ， 上 级 元 素 字体 大 小 为 20pt， 设 
定 其 子 元 素 字体 大 小 为 0.5em， 则 子 元 素 显示 出 的 字体 大 小 则 为 10pt。 
e ex: 是 以 给 定 字体 的 小 写字 母 x 高 度 作 为 基准 ， 对 于 不 同 的 字体 来 说 ， 小 写字 母 x 
的 高 度 是 不 同 的 ， 所 以 ex 单位 的 基准 也 不 同 。 
@ px: 也 叫 像素 ， 这 是 目前 来 说 使 用 最 广泛 的 一 种 单位 ，1 像素 也 就 是 屏幕 上 的 一 个 
小 方 格 ， 这 个 通常 是 看 不 出 来 的 。 由 于 显示 器 大 小 有 多 种 不 同 ， 因 此 每 个 小 方 格 的 
大 小 是 有 所 差异 的 ， 所 以 像素 单位 的 标准 也 不 一 样 。 在 CSS 3 的 规范 中 是 假设 
90px=1 英寸 ,但 是 在 通常 的 情况 下 ， 浏 览 器 都 会 使 用 显示 器 的 像素 值 来 作为 标准 。 
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11.2 编辑 和 浏览 CSS 3 


CSS 3 文件 是 纯 文本 格式 文件 ， 在 编辑 CSS 3 时 ， 就 有 了 多 种 选择 ， 可 以 使 用 一 些 简单 
的 纯 文 本 编辑 工具 ， 如 记事 本 等 ， 同 样 可 以 选择 专业 的 CSS 3 编辑 工具 ， 如 Dreamweaver 
等 。 记 事 本 编辑 工具 适合 于 初学 者 ， 不 适合 大 项 目 编辑 ， 但 专业 工具 软件 通常 占有 空间 较 
大 ， 打 开 不 太 方便 。 


11.2.1 案例 1 一 一 手工 编写 CSS 3 


使 用 记事 本 编写 CSS 3， 和 使 用 记事 本 编写 HTML 文档 基本 一 样 。 首 先 需要 打开 一 个 记 

事 本 ， 然 后 在 里 面 输入 相应 的 CSS 3 代码 即 可 。 有 具体 步骤 如 下 。 

EEJDp 打开 记事 本 ， 输 入 HTML 代码 ， 如 图 11-1 所 示 。 
七 TZ 添加 CSS 代码 ， 修 饰 HTML 元 素 。 在 <head> 
标记 中 间 ， 添 加 CSS 样式 代码 ， 如 图 11-2 所 











示 。 从 窗口 中 可 以 看 出 ， 在 <head> 标 记 中 间 ， 添 | 4 


< 
< 


d> 
tle> 手 工 编写 CSS3</titley 
ad> 


加 了 一 个 <style> 标 记 ， 即 CSS 样式 标记 。 在 | 人 i 
<style> 标 记 中 间 ， 对 p 样式 进行 了 设 定 ， 设 置 段 | 8 请 和 
落 居中 显示 并 且 颜 色 为 红色 。 ely 
ETE> 运行 网 页 文件 。 网 页 编辑 完成 后 ， 使 用 下 9.0 
打开 ， 如 图 11-3 所 示 ， 可 以 看 到 段落 在 页 面 中 间 图 11-1 记事 本 开发 HTML 








复 9 行 ， 





以 红色 字体 显示 。 





文件 (F) 编 缉 (E) 格式 (O) 查看 (V) 帮助 (H) 
<html> 
<head> 
《title) 手 工 编写 C553</title》 
style type= text/css”) 


pltext-align:center; color:red;] 
BA 忆 ] HAuserswdminist D - OX | GB 
</head) 


文件 用 。 六 得 6) 查看) 收藏 天 A) 工具 ” 



































<body> 
ee, 千 树 万 机 梨花 开 ! 这 两 句 读 使 用 Css 进行 了 修 本 
队 忽 如 一 夜 春 风 来 ， 千 树 万 树 委 花 开 ! 
ew k 这 两 句 诗 使 用 CSS 进 行 了 修饰 。 
笋 6 行 , 笋 9 列 
11-2 添加 样式 11-3 CSS 样式 显示 窗口 


11.2.2 ”案例 2 一 一 Dreamweaver 编写 CSS 


除了 使 用 记事 本 手工 编写 CSS 代码 外 ， 还 可 以 使 用 专用 的 CSS 编辑 器 ， 如 Dreamweaver 
的 CSS 编辑 器 和 Visual Studio 的 CSS 编辑 器 ， 这 些 编 辑 器 有 语法 着 色 ， 带 输入 提示 ， 甚 至 有 
自动 创建 CSS 的 功能 ， 因 此 深 受 开发 人 员 喜 爱 。 

使 用 Dreamweaver 创建 CSS 步骤 如 下 。 

EC 创建 HIML 文档 。 使 用 Dreamweaver 创建 HTML 文档 ， 此 处 创建 了 一 个 名 称 为 

















11.2.html 的 文档 ， 如 图 11-4 所 示 。 
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图 11-4 网 页 显示 窗口 


区 了 TB 添加 CSS 样式 。 在 设计 模式 中 ， 选 中 “ 忽 如 一 夜 春风 来 ……” 段 落后 ， 右 击 并 
在 弹出 的 快捷 菜单 中 选择 【CSS 样式 】>【 新 建 】 命 令 ， 弹 出 【新 建 CSS 规则 】 对 
话 框 ， 在 【为 CSS 规则 选择 上 下 文选 择 器 类 型 】 下 拉 列 表 框 中 ， 选 择 【 标 签 (重新 定 
义 HTML 元 素 )】 选 项 ， 如 图 11-5 所 示 。 

ES 选择 完成 后 ， 单 击 【 确 定 】 按 钮 ， 打 开 【p 的 CSS 规则 定义 】 对 话 框 ， 在 其 中 
设置 相关 的 类 型 ， 如 图 11-6 所 示 。 
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图 11-5 【新 建 CSS 规则 】 对 话 杠 图 11-6 【p 的 CSS 规则 定义 】 对 话 框 


TU 单 击 【 确 定 】 按 钮 ， 即 可 完成 p 样式 的 设置 。 设 置 完成 ，HTML 文档 内 容 发 生 
变化 ， 如 图 11-7 所 示 。 从 代码 模式 窗口 中 可 以 看 到 ， 在 <head> 标 记 中 ， 增 加 了 一 个 
<style> 标 记 ， 用 来 放置 CSS 样式 ， 其 样式 用 来 修饰 段落 p。 

运行 HTML 文档 。 在 下 9.0 浏览 器 中 预览 该 网 页 ， 其 显示 结果 如 图 11-8 所 示 ， 
字体 颜色 设置 为 浅 红色 ， 大 小 为 12px， 字 体 较 粗 。 
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图 11-7 设置 完成 显示 图 11-8 CSS 样式 显示 


11.3 在 HTML 5 中 使 用 CSS 3 的 方法 


CSS 3 样式 表 能 很 好 地 控制 页 面 显示 ， 以 达到 分 离 网 页 内 容 和 样式 代码 的 效果 。CSS 3 样 
式 表 控制 HTML 5 页 面 达到 好 的 样式 效果 ， 其 方式 通常 包括 行内 样式 、 内 峰 样 式 、 链 接 样式 
和 导入 样式 。 


11.3.1 案例 3 一 一 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方法 ， 就 是 直接 把 CSS 代码 添加 到 HTML 5 的 
标记 中 ， 即 作为 HTML 5 标记 的 属性 标记 存在 。 通 过 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单 
独 定义 样式 。 

使 用 行内 样式 方法 是 直接 在 HTML 5 标记 中 使 用 style 属性 ， 该 属性 的 内 容 就 是 CSS 3 的 
属性 和 值 ， 例 如 : 


<p style="color:red"> 段 落 样式 </p> 


【 例 11.3】( 实 例文 件 : ch11\11.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 样式 </title> 

</head> 

<body> 

<p style="color:red;font-size:20px;text-decoration:underline;text— 
align:center"> 此 段落 使 用 行内 样式 修饰 </p> 

<p style="color:blue;font-style:italic"> 正 文 内 容 </p> 
</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-9 所 示 ， 两 个 <p> 标 记 中 都 使 用 了 style 属性 ， 并 且 设置 
了 CSS 样式 ， 各 个 样式 之 间 互 不 影响 ， 分 别 显 示 自 己 的 样式 效果 。 第 1 个 段落 设置 红色 字 
































@s 
多 辕 
体 ， 居 中 显示 ， 带 有 下 划 线 ;第 二 个 段落 蓝 色 字 体 ， 以 斜体 显示 。 EE 
章 
ee © HAUsersAdmirist PD © ry 9 | 
文 伯 ”六 声 下 ， 喜 看 V) 收 神 天 A) 工具。 帮助 H) OD 
此 妥 落 使 用 行内 样式 修 人 大 
述 
sn 
基 
本 
语 
法 





图 11-9 行内 样式 显示 


@: 尽管 行内 样式 简单 ， 但 这 种 方法 不 常 使 用 ， 因 为 这 样 添加 无 法 完全 发 挥 样式 表 
淮 。 “内 容 结构 和 样式 控制 代码 ”分 离 的 优势 。 而 且 这 种 方式 也 不 利于 样式 的 重用 ， 如 果 
”需要 为 每 一 个 标记 都 设置 style 属性 ， 则 后 期 维护 成 本 高 ， 网 页 容易 “过 胖 ”， 因 此 不 


11.3.2 ”案例 4 一 一 内 肉 样 式 NN 


内 和 嵌 样 式 就 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 标 记 之 间 ， 并 且 用 <style> 和 
</style> 标 记 进行 声明 。 这 种 写法 虽然 没有 完全 实现 页 面 内 容 和 样式 控制 代码 完全 分 离 ， 但 可 
以 设置 一 些 比较 简单 的 样式 ， 并 统一 页 面 样式 。 其 语法 格式 如 下 。 


<head> 
<style type="text/css" > 
P 
{ 
color:red; 
font-size:12px; 
</style> 
</head> 


em 有 些 较 低 版 本 的 浏览 器 不 能 识别 <style> 标 记 ， 因 而 不 能 正确 地 将 样式 应 用 到 页 面 

半 。 显示 上 ， 而 是 直接 将 标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 用 
HMTL 注释 将 标记 中 的 内 容 隐藏 。 如 果 浏 览 器 能 够 识别 <style> 标 记 ， 则 该 标记 内 被 注 
释 的 CSS 样式 定义 代码 依旧 能 够 发 挥 作用 。 


<head> 
<style type="text/css" > 
过 = 
p 
{ 
color:red; 
font-size:12px; 
} 
一 -> 
</style> 
</head> 
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【 例 11.4】( 实 例文 件 : ch11\11.4.html) 


<!1DOCTYPE html> 

<html> 

<head> 

<title> 内 嵌 样 式 </title> 

<style type="text/css"> 

Pi 
color:orange; 
text-align:center; 
font-weight:bolder; 
font-size:25px; 

} 

</style> 

</head><body> 

<p> 此 段落 使 用 内 嵌 样 式 修饰 </p> 

<p> 正 文 内 容 </p> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 11-10 所 示 ， 两 个 <p> 标 记 中 都 被 CSS 样式 修饰 ， 其 样式 保持 一 
致 ， 段 落 居中 、 加 粗 并 以 橙色 字体 显示 。 


2 在 上 面 例子 中 ， 所 有 CSS 编码 都 在 <style> 标 记 中 ， 方 便 了 后 期 维护 ， 页 面相 比 

较 于 行内 样式 大 大 “瘦身 ”了 。 但 如 果 一 个 网 站 拥有 很 多 页 面 ， 对 于 不 同 页 面 <p> 标 

”记者 希望 采用 同样 风格 时 ， 内 性 方式 就 显得 有 点 麻烦 ， 因 此 该 种 方法 只 适用 于 特殊 页 
面 设置 单独 的 样式 风格 。 
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此 段落 使 用 内 捞 样 式 修饰 


正文 内 容 





11-10 ”内 嵌 样 式 显示 


11.3.3 ”案例 5 一 一 链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 ， 也 是 最 实用 的 方法 。 它 很 好 地 将 “页 面 内 容 ” 和 “ 样 
式 风格 代码 ”分 离 成 两 个 文件 或 多 个 文件 ， 实 现 了 页 面 框架 HIML 5 代码 和 CSS 3 代码 的 完 
整 分 离 ， 使 前 期 制作 和 后 期 维护 都 十 分 方便 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通过 
<link> 链 接 标记 链接 到 页 面 中 ， 而 且 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 如 下 所 示 。 


<link rel="stylesheet" type="text/css" href="]l.css" /> 

















@ rel 指定 链接 到 样式 表 ， 其 值 为 stylesheet。 

@ type 表示 样式 表 类 型 为 CSS 样式 表 。 

。 href 指定 了 CSS 样式 表 所 在 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 L.ess 文件 。 

这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没有 在 同一 路 径 下 ， 则 需要 指定 
样式 表 的 绝对 路 径 或 引用 位 置 。 

【 例 11.5】( 实 例文 件 : ch11\11.5.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 样 式 </title> 

<link rel="stylesheet" type="text/css" href="11.5.css" /> 

</head><body> 

<h1>css 3 的 学 习 </hl> 

<p> 此 段落 使 用 链接 样式 修饰 </p> 

</body> 

</html> 


【 例 11.5】( 实 例文 件 : ch11\11.5.css) 


hl{text-align:center;} 
p{font-weight:29px;text-align:center;font-style:italic;} 


在 正 浏览 器 中 浏览 效果 如 图 11-11 所 示 ， 标 题 和 有 段落 以 不 同样 式 显示 ， 标 题 居中 显示 ， 
段落 以 斜体 居中 显示 。 

链接 样式 最 大 的 优势 就 是 将 CSS 3 代码 和 HTML 5 代码 完全 分 离 ， 并 且 同 一 个 CSS 文件 
能 被 不 同 的 HTML 所 链接 使 用 。 
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11-11 ”链接 样式 显示 


| 在 设计 整个 网 站 时 ， 可 以 将 所 有 页 面 链接 同一 个 CSS 文件 ， 使 用 相同 的 样式 风 
汇 。 格 。 如 果 整 个 网 站 需要 修改 样式 ， 只 修改 CSS 文件 即 可 。 


11.3.4 ”案例 6 一 一 导入 样式 


导入 样式 和 链接 样式 基本 相同 ， 都 是 创建 一 个 单独 的 CSS 文件 ， 然 后 再 引入 到 HIML 5 
文件 中 ， 但 是 语法 和 运作 方式 有 差别 。 采 用 导入 样式 的 样式 表 ， 在 HIML 5 文件 初始 化 时 ， 
会 被 导入 到 HTML 5 文件 内 ， 作 为 文件 的 一 部 分 ， 类 似 于 内 嵌 效 果 。 而 链接 样式 是 在 HTML 
标记 需要 样式 风格 时 才 以 链接 方式 引入 。 


看 
19@ 


APP 和 移动 网 站 开发 


案例 课堂 @ 一 





导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 
表 ， 例如: 


<head> 
<style type="text/css" > 
过 和 一 
Qimport "1.css" 
--> </style> 
</head> 


导入 外 部 样式 表 相当 于 将 样式 表 导 入 到 内 部 样式 表 中 ， 其 方式 更 有 优势 。 导 入 外 部 样式 
表 必须 在 样式 表 的 开始 部 分 、 其 他 内 部 样式 表 上 面 。 
【 例 11.6】( 实 例文 件 : chll\11.6.htmD) 


<!1DOCTYPE html> 
<html> 

<head> 
<title> 导 入 样式 </title> 
<style> 

limpork “LL -C33 
</style> 

</head> 

<body> 

<h1l>Css 学 习 </h1> 

<p> 此 段落 使 用 导入 样式 修饰 </p> 
</body> 

</html> 


【 例 11.6】( 实 例文 件 : chll\11.6.css) 





hl{text-align:center;color:#0000ff} 
p{font-weight:bolder;text-decoration:underline;font-size:20px;} 


在 Firefox 5.0 中 浏览 效果 如 图 11-12 所 示 ， 标 题 和 段落 以 不 同样 式 显示 ， 标 题 居中 显示 
颜色 为 蓝 色 ， 段 落 以 大 小 20px 并 加 粗 显示 。 
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图 11-12 导入 样式 显示 
导入 样式 与 链接 样式 相 比 ， 最 大 的 优点 就 是 可 以 一 次 导入 多 个 CSS 文件 ， 语 法 格式 如 下 。 


<style> 
Qimport "11.6.css" 
Qimport "test.css" 
</style> 


售 20 
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11.3.5 案例 7 一 优先 级 问题 
ol 

如 果 同 一 个 页 面 ， 采 用 了 多 种 CSS 使 用 方式 ， 如 使 用 行内 样式 、 链 接 样式 和 内 肉 样 式 。 2 

如 果 这 几 种 样式 ， 共 同 作 用 于 同一 个 标记 ， 就 会 出 现 优先 级 问题 ， 即 究竟 哪 种 样式 设置 有 效 概 
果 ? 例如 ， 内 媒 设 置 字体 为 宋体 ， 链 接 样式 设置 为 红色 ， 那 么 二 者 会 同时 生效 ， 如 都 设置 字 EE 
体 颜 色 ， 情 况 就 会 复杂 。 汉 
1， 行 内 样式 和 内 襄 样 式 比较 浊 


例如 ， 有 这 样 一 种 情况 : 


<style> 

.Pp{color:red} 

</style> 

<p style = "color:blue "> 段落 应 用 样式 </p> 


在 样式 定义 中 ， 段 落 标记 <p> 匹 配 了 两 种 样式 规则 ， 一 种 使 用 内 嵌 样 式 定义 颜色 为 红色 ， 
一 种 使 用 p 行内 样式 定义 颜色 为 蓝 色 ， 而 在 页 面 代码 中 ， 该 标记 使 用 了 类 选择 符 。 但 是 ， 标 
记 内 容 最 终 会 以 哪 一 种 样式 显示 呢 ? 

【 例 11.7】( 实 例文 件 ，ch11\11.7.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title> 优 先 级 比较 </title> 
<style> 

.p{color:red} 

</style> 

</head> 

<body> 

<p style = " color:blue "> 优先 级 测试 </p> 
</body> 

</html> 


在 下 浏览 器 中 浏览 效果 如 图 11-13 所 示 ， 段 落 以 蓝 色 字 体 显示 ， 可 以 知道 行内 优先 级 大 
于 内 区 优先 级 。 
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图 11-13 ”优先 级 显示 
2. 内 谋 样 式 和 链接 样式 比较 


以 相同 的 例子 测试 内 嵌 样 式 和 链接 样式 优先 级 ， 将 设置 颜色 样式 代码 单独 放 在 一 个 CSS 
文件 中 ， 使 用 链接 样式 引入 。 
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【 例 11.8】( 实 例文 件 : chll\11.8.htmD 


<!DOCTYPE html> 

<html> 

<head> 
<title> 优 先 级 比较 </title> 
<link href="11.8.css" type="text/css" rel="stylesheet"> 
<style>p{color:red} 
</style></head> 

<body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


【 例 11.8】( 实 例文 件 : chll\11.8.css) 


p{color:yellow} 


在 正 浏览 器 中 浏览 效果 如 图 11-14 所 示 ， 段 落 以 红色 字体 显示 。 
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优先 级 测试 








图 11-14 ”优先 级 测试 


从 上 面 代码 中 可 以 看 出 ， 内 赃 样 式 和 链接 样式 同时 对 段落 p 修饰 ， 段 落 显 示 红 色 字 体 。 
可 以 知道 ， 内 嵌 样 式 优先 级 大 于 链接 样式 。 

3. 链接 样式 和 导入 样式 

现在 进行 链接 样式 和 导入 样式 测试 ， 分 别 创建 两 个 CSS 文件 ， 一 个 作为 链接 ， 一 个 作为 
导入 。 

【 例 11.9】( 实 例文 件 : ch11\11.9.html) 


<!DOCTYPE html> 


<html> 

<head> 
<title> 优 先 级 比较 </title> 
<style> 

Emoort “1l:9 26539” 
</style> 

<link href="11.9 1l.css" type="text/css" rel="stylesheet"> 
</head><body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


【 例 11.9】( 实 例文 件 : chll\11.9 1.css) 


p{color:green} 


信心 


【 例 11.9】( 实 例文 件 : chll\11.9_2.css) 

p{color:purple} 

在 下 浏览 器 中 浏览 效果 如 图 11-15 所 示 ， 段 落 以 绿色 显示 。 从 结果 中 可 以 看 出 ， 此 时 链 
接 样式 优先 级 大 于 导入 样式 优先 级 。 
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文件 (有 ” 妨 编 (E) ”前 看 (V) 收藏 夫 (A) 工具 (T) 。 帮助 (H) 











优先 级 测试 





图 11-15 优先 级 比较 


11.4 ”CSS 3 的 常用 选择 器 


选择 器 (selector) 也 被 称 为 选择 符 ， 所 有 HTML 5 语言 中 的 标记 都 是 通过 不 同 的 CSS 3 选 
择 器 进行 控制 的 。 选 择 器 不 只 是 HTML 5 文档 中 的 元 素 标记 ， 还 可 以 是 类 、ID 或 是 元 素 的 某 
种 状态 。 根 据 CSS 选择 符 用 途 可 以 把 选择 器 分 为 标签 选择 器 、 类 选择 器 、 全 局 选择 器 、ID 选 
择 器 和 伪 类 选择 器 等 。 


11.4.1 ”案例 8 一 一 标签 选择 器 


HTML 5 文档 是 由 多 个 不 同 标记 组 成 ， 而 CSS 3 选择 器 就 是 声明 哪些 标记 采用 样式 。 例 
如 ，p 选择 器 ， 就 是 用 于 声明 页 面 中 所 有 <p> 标 记 的 样式 风格 。 同 样 也 可 以 通过 hl 选择 器 来 
声明 页 面 中 所 有 <hl> 标 记 的 CSS 风格 。 

标签 选择 器 最 基本 的 形式 如 下 。 


tagName {property:value} 





pr 其 中 tagName 表示 标记 名 称 ， 如 p、hl 等 HTML 标记 ; property 表示 CSS 3 属 
半 性; value 表示 CSS 3 属性 值 。 


【 例 11.10】( 实 例文 件 ，ch11\11.10.html) 


<1DOCTYPE html> 

<html> 

<head> 
<title> 标 签 选择 器 </title> 
<style> 
p{color:blue;font-size:20px;} 
</style> 

</head> 

<body> 
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<p> 此 处 使 用 标签 选择 器 控制 段落 样式 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-16 所 示 ， 段 落 以 蓝 色 字体 显示 ， 大 小 为 20px。 





(DO er -ox EF 
文件 往 纺 (日 查看 (V)】 收 基 夫 (A) 工具 (1 帮 动 (H) 




















此 处 使 用 标签 选择 器 控制 段落 样式 





图 11-16 标签 选择 器 显示 
如 果 在 后 期 维护 中 ， 需 要 调整 段落 颜色 ， 只 需要 修改 color 属性 值 即 可 。 


Br CSS 3 语言 对 于 所 有 属性 和 值 都 有 相对 严格 要 求 ， 如 果 声 明 的 属性 在 CSS 3 规范 
站。 中 没有 ， 或 者 某 个 属性 值 不 符合 属性 要 求 ， 都 不 能 使 CSS 语句 生效 。 


11.4.2 ”案例 9 一 一 类 选择 器 


在 一 个 页 面 中 ， 使 用 标签 选择 器 ， 会 控制 该 页 面 中 所 有 此 标记 显示 样式 。 如 果 需 要 为 此 
类 标记 中 的 其 中 一 个 标记 重新 设 定 ， 此 时 仅 使 用 标签 选择 器 是 不 能 达到 效果 的 ， 还 需要 使 用 
类 (class) 选 择 器 。 

类 选择 器 用 来 为 一 系列 标记 定义 相同 的 呈现 方式 ， 常 用 语法 格式 如 下 。 


. ClassValue {property:value} 


classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 定义 者 自己 命名 。 
【 例 11.11】( 实 例文 件 : ch11\11.11.html) 


<!DOCTYPE html> 
<html> 
<head><title> 类 选择 器 </title> 
<style> 
-aaif 
color:blue; 
font-size:20px; 
} 
bb 
color:red; 
font-size:22px; 
} 
</style></head><body> 
<h3 class=bb> 学 习 类 选择 器 </h3> 
<p class="aa"> 此 处 使 用 类 选择 器 aa 控制 段落 样式 </p> 
<p class="bb"> 此 处 使 用 类 选择 器 bb 控制 段落 样式 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-17 所 示 ， 第 一 个 段落 以 蓝 色 字体 显示 ， 大 小 为 20px， 
第 二 个 段落 以 红色 字体 显示 ， 大 小 为 22px， 标 题 同样 以 红色 字体 显示 ， 大 小 为 22px。 
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学 习 类 选择 器 


此 处 使 用 类 选择 器 aa 控制 段落 样式 
此 处 使 用 类 选择 器 bb 控制 段 沙 样 式 





图 11-17 类 选择 器 显示 


11.4.3 ”案例 10 一 一 ID 选择 器 


ID 选择 器 和 类 选择 器 相似 ， 都 是 针对 特定 属性 的 属性 值 进行 匹配 。ID 选择 器 定义 的 是 某 
一 个 特定 的 HTML 元 素 ， 一 个 网 页 文件 中 只 能 有 一 个 元 素 使 用 某 一 ID 的 属性 值 。 
定义 ID 选择 器 的 基本 语法 格式 如 下 。 


#idValue{Property:value} 


在 上 述 语 法 格式 中 ，idValue 是 选择 器 名 称 ， 可 以 由 CSS 定义 者 自己 命名 。 
【 例 11.12】( 实 例文 件 : ch11\11.12.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>ID 选择 器 </title> 
<style> 
#fontstyle{ 

color:blue; 

font-weight:bold; 
} 
#textstyle{ 

color:red; 
font-size:22px; 

} 
</style> 
</head> 
<body> 
<h3 id=textstyle> 学 习 ID 选择 器 </h3> 
<p id=textstyle> 此 处 使 用 ID 选择 器 aa 控制 段落 样式 </p> 
<p id=fontstyle> 此 处 使 用 ID 选择 器 bb 控制 段落 样式 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-18 所 示 ， 第 一 个 段落 以 红色 字体 显示 ， 大 小 为 22px， 
第 二 个 段落 以 红色 字体 显示 ， 大 小 为 22px， 标 题 同样 以 蓝 色 字 体 显示 ， 大 小 为 20px。 
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3 vsers naminit DO - cx 


























学 习 ID 选 择 器 
此 处 使 用 ID 选择 器 aa 控制 段落 样式 
此 处 使 用 ID 选择 器 bb 控制 段落 样式 





11-18 ID 选择 器 显示 


11.4.4 ”案例 11 一 一 全 局 选择 器 


如 果 想 要 一 个 页 面 中 所 有 的 <html> 标 记 使 用 同一 种 样式 ， 可 以 使 用 全 局 选择 器 。 全 局 选 
择 器 ， 顾 名 思 义 就 是 对 所 有 HTML 元 素 起 作用 。 语 法 格式 如 下 。 


*{property:value} 


其 中 “*” 表 示 对 所 有 元 素 起 作用 ，property 表示 CSS 3 属性 名 称 ，value 表示 属性 值 。 合 
用 示例 如 下 。 


*{margin:0; padding:0;} 


【 例 11.13】( 实 例文 件 : ch11\11.13.html) 


<!DOCTYPE html> 
<html> 
<head><title> 全 局 选择 器 </title> 
<style> 
人 
color:red; 
font-size:30px 
l 
</style></head> 
<body> 
<p> 使 用 全 局 选择 器 修饰 </p> 
<p> 第 一 段 </p> 
<h1> 第 一 段 标题 </h1> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-19 所 示 ， 两 个 段落 和 标题 都 是 以 红色 字体 显示 ， 大 小 为 
30px。 
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图 11-19 全 局 选择 器 


11.4.5 “案例 12 一 一 组 合 选择 器 


将 多 种 选择 器 进行 搭配 ， 可 以 构成 一 种 复合 选择 器 ， 也 称 为 组 合 选择 器 。 组 合 选择 器 只 
是 一 种 组 合 形式 ， 并 不 算是 一 种 真正 的 选择 器 ， 但 在 实际 中 经 常 使 用 。 使 用 示例 如 下 。 


-Orderlist li {xxxx} 
.tableset td {} 


在 使 用 的 时 候 一 般 用 在 重复 出 现 并 且 样 式 相 同 的 一 些 标签 里 ， 如 li 列表 、td 单元 格 和 dd 
自 定义 列表 等 。 


hl.red {color: red} 
<hl class="red"></h1> 


【 例 11.14】( 实 例文 件 : ch11\11.14.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 组 合 选择 器 </title> 
<atyle> 
Pi 
color:red 
+ 
p .firstPar{ 
color:blue 


ee 
py A 


1 
.firstPari{ 
color:green 


1} 

</style></head><body> 

<p> 这 是 普通 段落 </p> 

<p class="firstPar"> 此 处 使 用 组 合 选择 器 </p> 
<hl class="firstPar"> 我 是 一 个 标题 </h1> 
</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-20 所 示 ， 第 一 个 段落 颜色 为 红色 ， 采 用 的 p 标签 选择 
器 ， 第 二 个 段落 显示 的 是 蓝 色 ， 采 用 的 是 p 和 类 选择 器 二 者 组 合 的 选择 器 ， 标 题 H1l 以 绿色 字 
体 显示 ， 采 用 的 是 类 选择 器 。 
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此 处 使 用 组 合 选择 器 


我 是 一 个 标题 





11-20 组合 选择 器 显示 
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11.4.6 ”案例 13 一 一 继承 选择 器 


继承 选择 器 的 规则 是 ， 子 标记 在 没有 定义 的 情况 下 所 有 的 样式 是 继承 父 标记 的 ， 当 子 标 
记 重 复 定义 了 父 标记 已 经 定义 过 的 声明 时 ， 子 标记 就 执行 后 面 的 声明 ， 与 父 标记 不 神 突 的 地 方 
仍然 沿用 父 标记 的 声明 。CSS 的 继承 是 指 子 孙 元 素 继承 祖先 元 素 的 某 些 属性 。 使 用 示例 如 下 。 
<div class="test"> 


<span><img src="xxx"” alt=" 示 例 图 片 "/></span> 
</div> 


对 于 上 面 层 而 言 ， 如 果 其 修饰 样式 为 下 面 代码 : 


.test span img {border:lpx blue solid;} 


则 表示 该 选择 器 先 找到 class 为 test 的 标记 ， 再 从 其 子 标记 里 查找 <span> 标 记 ， 再 从 
<span> 的 子 标记 中 找到 img 标记 。 也 可 以 采用 下 面 的 形式 : 


div span img {border:lpx blue solid;} 


可 以 看 出 其 规律 是 从 左 往 右 ， 依 次 细 化 ， 最 后 锁定 要 控制 的 标记 。 
【 例 11.15】( 实 例文 件 ， ch11\11.15.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 继 承 选择 器 </title> 

<style type="text/css"> 

hl{color:red; text-decoration:underline;} 

hl strong{color:#004400; font-size:40px;} 

</style> 

</head> 

<body> 

<hl1> 测 试 css 的 <strong> 继 承 </strong> 效 果 </h1> 
<h1> 此 处 使 用 继承 <font> 选 择 器 </font> 了 么 ? </h1> 
</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-21 所 示 ， 第 一 个 段落 颜色 为 红色 ， 但 是 “继承 ”两 个 字 
使 用 绿色 显示 ， 并 且 大 小 为 40px， 除 了 这 两 个 设置 外 ， 其 他 的 CSS 样式 都 是 继承 父 标记 <h1> 
的 样式 ， 如 下 划 线 设置 。 第 二 个 标题 中 ， 虽 然 使 用 了 <font> 标 记 修 饰 选择 器 ， 但 其 样式 都 是 继 
承 于 父 类 标记 <h1>。 
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此 处 使 用 继承 选择 器 了 么 ? 











11-21 ”继承 选择 器 
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11.4.7 案例 14 一 一 伪 类 选择 器 


伪 类 选择 器 也 是 选择 器 的 一 种 ， 伪 类 选择 符 定义 的 样式 最 常 应 用 在 标记 <a> 上 ， 表 示 链 接 
4 种 不 同 的 状态 : 未 访问 链接 (link)、 已 访问 链接 (visited)、 激 活 链接 (active) 和 鼠标 停留 在 链接 
上 (hover)。 
标记 <a> 可 以 只 具有 一 种 状态 (:link)， 或 者 同时 具有 2 种 或 者 3 种 状态 。 例 如 ， 任 何 一 
证 个 有 HREF 属性 的 a 标签， 在 未 有 任何 操作 时 都 已经 具备 了 :link 的 条 件 ， 也 就 是 满足 了 有 
链接 属性 这 个 条 件 ; 如 果 是 访问 过 的 a 标记 ， 同 时 会 具备 :link :visited 两 种 状态 。 把 筷 标 
旨 针 移 到 访问 过 的 a 标记 上 时 ，a 标记 就 同时 具备 了 :link :visited :hover 3 种 状态 。 


使 用 示例 如 下 。 


这 让 并 彩 册 际 闽 ESSD_ 贡 1 小 全 


a:link{color:#FF0000; text-decoration:none} 

a:visited{color:#00FF00; text-decoration:none} 

a:hover{color:#0000FF; text-decoration:underline} 

a:active{color:#FFOOFF; text-decoration:underline} 

pr 上 面 的 样式 表示 该 链接 未 访问 时 颜色 为 红色 且 无 下 划 线 ,访问 后 是 绿色 且 无 下 划 
导线 ,激活 链接 时 为 蓝 色 且 有 下 划 线 ， 和 鼠标 指针 放 在 链接 上 时 为 紫色 且 有 下 划 线 。 


【 例 11.16】( 实 例文 件 : ch11\11.16.html) 


<!DOCTYPE html> 





<html> 

<head> 

<title> 伪 类 </title> 

<style> 

a:link {color: red} /* 未 访问 的 链接 
a:visited {color: green} /* 已 访问 的 链接 * 
a:hover {color:blue} YX 和 和 动 到 纺 上 eh 
a:active {color: orange} /* 选 定 的 链接 * 
</style> 

</head> 

<body> 


<a href=""> 链 接 到 本 页 </a> 

<a href="http://www.sohu.com"> 搜 狐 </a> 
</body> 

</html> 


在 下 浏览 器 中 浏览 效果 如 图 11-22 所 示 ， 可 以 看 到 有 两 个 超 链接 ， 第 一 个 超 链接 是 鼠标 
停留 在 上 方 时 ， 显 示 颜色 为 蓝 色 ， 另 一 个 是 访问 过 后 ， 显 示 颜色 为 绿色 。 
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11-22 ” 伪 类 显示 
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11.5 ”选择 器 声明 


使 用 CSS 3 选择 器 可 用 控制 HTML 5 标记 样式 ， 其 中 每 个 选择 器 属性 可 以 一 次 声明 多 
个 ， 即 创建 多 个 CSS 属性 修饰 HTML 标记 ， 实 际 上 也 可 以 将 选择 器 声明 多 个 ， 并 且 任 何 形式 
的 选择 器 (如 标记 选择 器 、class 类 别 选择 器 、ID 选择 器 等 ) 都 是 合法 的 。 


11.5.1 案例 15 一 一 集体 声明 


在 一 个 页 面 中 ， 有 了 时 需要 不 同 种 类 标记 样式 保持 一 致 ， 例 如 需要 <p> 标 记 和 <h1> 标 记 的 字 
体 保持 一 致 ， 此 时 可 以 将 <p> 标 记 和 <h1> 标 记 共 同 使 用 类 选择 器 ， 除 了 这 个 方法 之 外 ， 还 可 以 
使 用 集体 声明 方法 。 集 体 声 明 就 是 在 声明 各 种 CSS 选择 器 时 ， 如 果菜 些 选择 器 的 风格 是 完 
相同 的 ， 或 者 部 分 相同 ， 可 以 将 风格 相同 的 CSS 选择 器 同时 声明 。 

【 例 11.17】( 实 例文 件 : chll\11.17.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 集 体 声明 </title> 
<style type="text/css"> 
hl,h2,p{ 
color:red; 
font-size:20px; 
font-weight:bolder; 
} 
</style></head><body> 
<h1> 此 处 使 用 集体 声明 </h1> 
<h2> 此 处 使 用 集体 声明 </h2> 
<p> 此 处 使 用 集体 声明 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 11-23 示 ， 网 页 上 标题 1、 标 题 2 和 段落 都 以 红色 字体 加 粗 
显示 ， 并 且 大 小 为 20px。 











[ee 国 HNUeersWdminict -已 XX 
文件 (有) 妨 编 (E) 查看 V) 收 京 六 (A) ”工具 (D) 者 动 (H) 


此 处 使 用 集体 声明 











此 处 使 用 集体 声明 
此 处 使 用 集体 声明 





11-23 ”集体 声明 显示 


11.5.2 ”案例 16 一 一 多 重 嵌 套 声明 
在 CSS 3 控制 HTML 5 标记 样式 时 ， 还 可 以 使 用 层 层 递 进 的 方式 ， 即 赃 套 方式 ， 对 指定 


二 
售 200 


a 


位 置 的 HTML 标记 进行 修饰 ， 例 如 . 当 <p> 与 </p> 之 间 包 含 <a></a> 标 记 时 ， 就 可 以 使 用 这 种 方 
式 对 HMTL 标记 进行 修饰 。 
【 例 11.18】( 实 例文 件 : ch11\11.18.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 多 重典 套 声明 </title> 

<style> 

p{font-size:20px;} 

p a{color:red;font-size:30px;font-weight:bolder;} 
</style></head><body> 

<p> 这 是 一 个 多 重典 套 <a href=""> 测 试 </a></p> 
</body> 

</html> 


在 下 浏览 器 中 浏览 效果 如 图 11-24 示 ， 在 段落 中 ， 超 链接 显示 红色 字体 ， 大 小 为 
30px， 其 原因 是 使 用 了 嵌 套 声明 。 


六 并 睹 I 攻 贡 eSS9_ 寺 4 小 和 

















| HWUserswdminist D ~ 0 X | @ $ 重 声明 
文件 (久久 齐 看 (V) 收 写 实 (A 工具) 帮助 (H) 


这 是 一 个 多 重 嵌 套 测试 














罗 A 


11-24 ”多 重 嵌 套 声明 


11.6 ”综合 实例 1 一 一 制作 炫 彩 网 站 LOGO 


使 用 CSS， 可 以 给 网 页 中 的 文字 设置 不 同 的 字体 样式 ， 下 面 就 来 制作 一 个 网 站 的 文字 
LOGO。 具 体 步骤 如 下 。 

ET 分 析 需 求 。 

本 实例 要 求 简单 ， 使 用 标记 <h1> 创 建 一 个 标题 文字 ， 然 后 使 用 CSS 样式 对 标题 文字 进行 
修饰 ， 可 以 从 颜色 、 尺 寸 、 字 体 、 背 景 、 边 框 等 方面 入 手 。 实 例 完成 后 ， 其 效果 如 图 11-25 
所 示 。 

CE 了 TY 构建 HIML 页 面 。 

创建 HTML 页 面 ， 完 成 基本 框架 并 创建 标题 ， 其 代码 如 下 。 

<html> 

<head> 

<title> 炫 彩 Logo</title> 
</head> 

<body> 


<body> 
<h1> 


D2 
21@ 





全 2 
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<span class=cl1> 缤 </span> 
<span class=c2> 纷 </span> 
<span class=c3> 夏 </span> 
<span class=c4> 衣 </span></hl> 
</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 11-26 所 示 ， 可 以 看 到 标题 hl 在 网 页 显示 中 没有 任何 修饰 。 











司 Hhuserswdmiis PD - OX 全 isftooo 
文件 病 得 E) 查看 (V) 。 收藏/A) 工具 (T) 帮助 (H) 
































11-25 五 彩 标题 显示 11-26 标题 显示 
使 用 内 嵌 样 式 。 


如 果 要 对 hl 标题 进行 修饰 ， 需 要 添加 CSS 样式 ， 此 处 使 用 内 嵌 样 式 ， 在 <head> 标 记 中 
添加 CSS 样式 ， 其 代码 如 下 。 
<style> 


hE th 
</style> 


在 正 浏览 器 中 浏览 效果 如 图 11-27 所 示 ， 可 以 看 到 此 时 hl 标题 没有 任何 变化 ， 只 是 在 
代码 中 引入 了 <style> 标 记 。 

EECSUZ 改变 颜色 、 字 体 和 尺寸 。 

添加 CSS 代码 ， 改 变 标题 样式 ， 其 样式 在 颜色 、 字 体 和 尺寸 方面 进行 设置 ， 其 代码 如 下 。 


hi 

font-family: Arial, sans-serif; 
font-size: 50px; 

color: #369? 

} 


在 正 浏览 器 中 浏览 效果 如 图 11-28 所 示 ， 字 体 大 小 为 24 像素 ， 颜 色 为 浅 蓝 色 ， 字 体 为 
Arial 体 。 





文件 (月 。 痴 鱼 (Ej。 音 看 (V) 收藏 夫 (A) 工具 (T 。 帮助 (H) 








缤纷 夏 衣 





图 11-27 引入 style 标记 图 11-28 添加 文本 修饰 标记 


加 入 灰色 底线 。 
为 hl 标题 加 入 底线 ， 其 代码 如 下 。 


padding-bottom: 4px; 
border-bottom: 2px solid #ccc; 


在 正 浏览 器 中 浏览 效果 如 图 11-29 所 示 ， 可 以 看 到 “缤纷 夏 衣 ”文字 下 面 ， 添 加 了 一 个 
边框 ， 边 框 和 文字 距离 是 4 像素 。 

ETB> 增加 背景 图 。 

使 用 CSS 样式 为 标记 <h1> 添 加 背景 图 片 ， 其 代码 如 下 。 

background: url(01.jpg) repeat-x bottom; 

在 下 浏览 器 中 浏览 效果 如 图 11-30 所 示 ， 可 以 看 到 在 “缤纷 夏 衣 ”文字 下 面 ， 添 加 了 一 
个 背景 图 片 ， 图 片 在 水 平 (X) 轴 方向 进行 平 铺 。 


[国人 EC 


。 文件 月。 坊 儿 (查看 (V) 收藏 交 A) 工具 (T) 帮助 (H) 








缤纷 夏 衣 








图 11-29 ”添加 边框 样式 图 11-30 添加 背景 

ET 定义 标题 宽度 。 

使 用 CSS 属性， 将 标题 变 小 ， 使 其 正好 符合 4 个 字体 的 宽度 ， 其 代码 如 下 。 

width:250px; 

在 正 浏览 器 中 浏览 效果 如 图 11-31 所 示 ， 可 以 看 到 “缤纷 夏 衣 ”文字 下 面 的 背景 图 缩短 
了 ， 正 好 和 字体 宽度 相同 。 

了 TB 定义 字体 颜色 。 

在 CSS 样式 中 ， 为 每 个 字 定义 颜色 ， 其 代码 如 下 。 


crt 
color: #B3EE3A; 


BN 


上 
sc2{ 
color:#71C671; 


color: #00FS5FF; 


color:#00EEO00; 
时 


在 正 浏览 器 中 浏览 效果 如 图 11-32 所 示 ， 每 个 字体 显示 了 不 同 的 颜色 。 
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图 11-31 定义 宽度 图 11-32 定义 字体 颜色 


11.7 ”综合 案例 2 一 一 制作 学 生 信 息 统计 表 


本 实例 介绍 前 面 在 HTML 5 中 使 用 CSS 3 方法 中 的 优先 级 问题 ， 并 来 制作 一 个 学 生 统 计 
表 。 具 体操 作 步骤 如 下 。 
EESDp 打开 记事 本 ， 在 其 中 输入 如 下 代码 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 学 生 信息 统计 表 </title> 
<style type="text/css"> 
< 
#dataTb 
{ 
font-family: 宋 体 ， sans-serif; 
font-size:20px; 
background-color:#66CCCC; 
border-top:lpx solid #000000; 
border-left:lpx solid #FFOOBB; 
border-bottom:lpx solid #FF0000; 
border-right:lpx solid #FF0000; 
3 
table 
{ 
font-family: 楷 体 GB2312， sans-serif; 
font-size:20px; 
background-color:#EEEEEF; 
border-top:lpx solid #FFFFOO0; 
border-left:lpx solid #FFFFOO; 
border-bottom:lpx solid #FFFFOO; 
border-right:lpx solid #FFFFO0O0; 
$ 
.tbstyle 
{ 
font-family: 隶 书 ，sans-serif; 
font-size:16px; 
background-color:#EEEEEF; 
border-top:1lpx solid #000FFF; 
border-left:lpx solid #FF0000; 


border-bottom:1lpx solid #0000FF; 
border-right:lpx solid #000000; 
a 
并 二 
</style> 
</head> 
<body> 
<form name="frmCSss" method="post" action="#"> 
<table width="400" align="center™ border="1" 
id="dataTb" class= "tbstyle"> 
Er 
<th> 学 号 </th> 
<th> 姓 名 </th> 
<th> 班 级 </th> 
</tr> 
<tr> 
<td>001</td> 
<td> 张 三 </td> 
<td> 信 科 0401</td> 
</tr> 
过 下 下 
<td>002</td> 
<td> 李 四 </td> 
<td> 电 科 0402</td> 
</tr> 
EE 
<td>003</td> 
<td> 王 五 </td> 
<td> 计 科 0405</td> 


< /tr> 
</table> 
</form> 
</body> 
</html> 


ETE> 保存 网 页 ， 在 IE 浏览 器 中 预览 效果 如 图 11-33 所 示 。 











11-33 最终 效果 


cellspacing="0" 
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11.8 高 手 甜 点 


甜点 1: 使 用 CSS 定义 字体 时 ， 在 不 同 浏览 器 中 显示 的 字体 大 小 不 一 样 ? 


例如 ， 使 用 font-size:14px 定义 的 宋体 文字 , 在 正 下 实际 高 是 16px， 下 空白 是 3px， 
Firefox 浏览 器 下 实际 高 是 17px、 上 空 lpx、 下 空 3px。 其 解决 办 法 是 在 文字 定义 时 设 定 line- 
height， 并 确保 所 有 文字 都 有 默认 的 line-height 值 。 


甜点 2: CSS 在 网 页 制作 中 一 般 有 4 种 方式 的 用 法 ， 那 么 具体 在 使 用 时 该 采用 哪 种 用 法 ? 
当 有 多 个 网 页 要 用 到 的 CSS， 采 用 外 连 CSS 文件 的 方式 ， 这 样 网 页 的 代码 将 大 大 减少 ， 


并 且 修改 起 来 非常 方便 ， 只 在 单个 网 页 中 使 用 的 CSS， 采 用 文档 头 部 方式 ， 只 有 在 一 个 网 
页 ， 一 、 两 个 地 方才 用 到 的 CSS， 采 用 行内 插入 方式 。 

甜点 3: CSS 的 行内 样式 、 内 底 样 式 和 链接 样式 可 以 在 一 个 网 页 中 混用 吗 ? 

3 种 用 法 可 以 混用 ， 且 不 会 造成 混乱 ， 这 就 是 它 为 什么 称 之 为 “ 层 合 样式 表 ” 的 原因 。 浏 
览 器 在 显示 网 页 时 是 这 样 处 理 的 ， 先 检查 有 没有 行内 插入 式 CSS， 如 有 就 执行 ， 针 对 本 名 的 
其 他 CSS 就 不 去 管 了 ， 其 次 检查 内 嵌 方 式 的 CSs， 如 有 就 执行 ， 在 前 两 者 都 没有 的 情况 下 再 
检查 外 连 文 件 方式 的 CSS。 因 此 可 看 出 ，3 种 CSS 的 执行 优先 级 是 ， 先 行内 样式 ， 然 后 是 内 
嵌 样 式 ， 最 后 是 链接 样式 。 


甜点 4: 如 何 下 载 网 页 中 的 CSS 文件 ? 


选择 网 页 上 的 【查看 】>【 源 文件 】 命 令 ， 如 果 有 CSS， 可 以 直接 复制 下 来 ， 如 果 没 
有 ， 可 以 找 找 有 没有 类 似 下 面 这 种 链接 的 代码 。 
<link href="/index.css" rel="stylesheet" type="text/css"> 


例如 ， 上 面 的 这 个 CSS 文件 ， 就 可 以 打开 网 址 后 面 直接 加 "/index.css"， 然 后 按 Enter 键 
即 可 。 








11.9” 跟 我 练 练 手 


练习 1: 使 用 两 种 方法 编写 CCS 样式 表 。 

练习 2: 练习 使 用 CSS 常用 选择 器 。 

练习 3: 练习 声明 选择 器 。 

练习 4: 制作 一 个 包含 炫 彩 网 站 Logo 的 例子 。 
练习 5: 制作 一 个 学 生 信息 统计 表 页 面 的 例子 。 
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已 掌握 的 在 方 框 中 打 钩 ) 
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本 样式 是 CSS 技术 的 基本 功能 ， 通 过 CSS 文本 标记 语言 ， 可 以 设置 文本 的 样式 


粗细 等 。 
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12.1 美化 网 页 文字 


在 HIML 中 ，CSS 字体 属性 用 于 定义 文字 的 字体 、 大 小 、 粗 细 的 表现 等 。 常 见 的 字体 属 
性 包括 字体 、 字 号 、 字 体 风格 、 字 体 颜 色 等 。 


12.1.1 案例 1 一 一 设置 文字 的 字体 


font-family 属性 用 于 指定 文字 字体 类 型 ， 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 
即 在 网 页 中 ， 展 示 字 体 不 同 的 形状 。 具 体 的 语法 如 下 。 


{font-family : name} 
{font-family : cursive | fantasy | monospace | serif | sans-serif} 


从 语法 格式 上 可 以 看 出 ，font-family 有 两 种 声明 方式 。 第 一 种 方式 ， 使 用 name 字体 名 
称 ， 按 优先 顺序 排列 ， 以 逗号 隔 开 ， 如 果 字 体 名 称 包 含 空格 ， 则 应 使 用 引号 括 起 ， 在 CSS 3 
中 ， 比 较 常 用 的 是 第 一 种 声明 方式 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 。 如 果 使 用 
fantasy 序列 ， 将 提供 默认 字体 序列 。 

【 例 12.1】( 实 例文 件 : ch12\12.1.html) 


<!DOCTYPE html> 

<html> 

<style type=text/css> 
p{font-family: 黑 体 } 

</style> 

<body> 

<p align=center> 天 行 健 ， 君 子 应 自强 不 息 。</p> 
</body> 

</html> 


在 正 浏 览 嚣 中 浏览 效果 如 图 12-1 所 示 ， 可 以 看 到 文字 居中 并 以 黑体 显示 。 








[eo 已 H\UserswAdminist OD - OX | 本 HAUsers\Administr. 


文件 (月 编 纺 (E) 前 看 (V) 收藏 夫 (A) 工具 [T) 帮助 (H) 











天 行 健 ， 君 子 应 自强 不 息 。 





12-1” 字 型 显示 


| 在 设计 页 面 时 ， 一 定 要 考虑 字体 的 显示 问题 ， 为 了 保证 页 面 达 到 预计 的 效果 ， 最 
SS 好 提供 多 种 字体 类 型 ， 而 且 最 好 以 最 基本 的 字体 类 型 作为 最 后 一 个 。 

其 样式 设置 如 下 。 

用 


全 2 


font-family: 华 文 彩云 , 黑体 , 宋体 


} 


/m1 


本 Roman， 那 么 ， 该 值 就 需要 使 用 双 引 号 引起 来 。 


p 
{ 


font-family: "Times New Roman" 


} 


12.1.2 ”案例 2 一 一 设置 文字 的 字号 
在 CSS 3 新 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 。 语 法 格式 如 下 。 


Lfont=size 3 数值 | inherit | xx-small | x-small | small | medium | large | 
x-large | xx-large | larger | smaller | length} 


其 中 ， 通 过 数值 来 定义 字体 大 小 ， 如 用 font-size:10px 的 方式 定义 字体 大 小 为 12 个 像 


到 训 


当 font-family 属性 值 中 的 字体 类 型 由 多 个 字符 囊 和 空格 组 成 时 ， 如 Times New 





必 想 灿 鹤 改 昼 司 代 亲 & SSO 到 窒 册 Z 小 


有 GZ 


素 。 此 外 ， 还 可 以 通过 medium 之 类 的 参数 定义 字体 的 大 小 ， 其 参数 含义 如 表 12-1 所 示 。 


表 12-1 font-size 参数 列表 














参 数 说 明 
xx-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 小 
x-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 小 
small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 小 
medium 默认 值 。 绝 对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 正常 
large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 大 
x-large | 。 根 据 对 象 字体 进行 调整 。 较 大 
xx-large 寸 。 根 据 对 象 字体 进行 调整 。 最 大 
larger 相对 字体 尺寸 。 相 对 于 父 对 象 中 的 字体 尺寸 进行 相对 增 大 。 使 用 成 比例 的 em 单位 计算 
smaller 相对 字体 尺寸 。 相 对 于 父 对 象 中 的 字体 尺寸 进行 相对 减 小 。 使 用 成 比例 的 em 单位 计算 
length 百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 其 百分比 取 值 是 基于 父 


对 象 中 的 字体 尺 才 


【 例 12.2】( 实 例文 件 : chl2\12.2.htmD 


<1DOCTYPE html> 


<html> 
<body> 


<div style="font-size:10pt"> 上 级 标记 大 小 
<p style="font-size:small"> 小 </p> 


<p style="font-size:larger"> 大 </p> 


<p style="font-size:x-small"> 小 </p> 
<p style="font-size:x-larger"> 大 </p> 


b 
2@ 
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<p style="font-size:50%"> 子 标记 </p> 
<p style="font-size:25pt"> 子 标记 </p> 
</div> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 12-2 所 示 ， 可 以 看 到 网 页 中 的 文字 被 设置 成 不 同 的 大 小 ， 
其 设置 方式 采用 了 绝对 数值 、 关 键 字 和 百分比 等 形式 。 
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文件” 妨 名 豆 看 V) 收 区 (A) 工具 (T) 才 动 (H) 

人 车 从 要 机 林 风 ， 霜 叶 红 于 二 月 花 。 

信 车 兴 要 机 林 族 ， 箱 叶 红 于 二 月 花 。 

停车 坐 爱 枫 林 晚 ， 霜 叶 红 于 二 月 花 。 

和 

停车 从 爱 机 林 耽 ， 箱 叶 红 于 二 月 花 。 


ee 


停车 坐 爱 枫 林 晚 ， 霜 叶 红 于 二 月 花 。 




















图 12-2 字体 大 小 显示 


在 上 面 例子 中 ，font-size 字体 大 小 为 50% 时 ， 其 比较 对 象 是 上 一 级 标签 中 的 10pt。 
同样 ， 还 可 以 使 用 inherit 值 ， 直 接 继承 上 级 标记 的 字体 大 小 ， 例 如 : 


<div style="font-size:50pt"> 上 级 标记 
<p style="font-size: inherit "> 继承 </p> 
</div> 


12.1.3 ”案例 3 一 一 设置 字体 风格 
font-style 通常 用 来 定义 字体 风格 ， 即 字体 的 显示 样式 。 在 CSS 3 新 规定 中 ， 语 法 格式 如 下 。 


font-style : normal | italic | oblique |inherit 
其 属性 值 有 4 个 ， 具 体 含 义 如 表 12-2 所 示 。 
表 12-2 font-style 参数 表 


属性 值 含义 








和 | 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 
Wilie | 浏览 器 会 显示 一 个 斜体 的 字体 样式 





oblique 将 没有 斜体 变量 的 特殊 字体 ， 浏 览 器 会 显示 一 个 倾斜 的 字体 样式 





规定 应 该 从 父 元 素 继承 字体 样式 


【 例 12.3】( 实 例文 件 : chl2\12.3.htmD) 


<!1DOCTYPE html> 
<html> 
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<body> 
<p style="font-style:italic"> 梅 花香 自 苦寒 来 </p> 
<p style="font-style:normal"> 梅 花香 自 苦寒 来 </p> 
<p style="font-style:oblique"> 梅 花香 自 苦寒 来 </p> 


</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 12-3 所 示 ， 可 以 看 到 文字 分 别 显示 为 不 同 的 样式 ， 如 和 斜体。 

















有 [oe 
FW 
0 HUser Administ P - COX | 碟 H\users' 


文件 咯 入 吉 昌 。 坦 看 收藏 夫 A， 工具 (帮助 (H) 




















毒龙 每 后 坊间 天 
梅花 香 自 苦寒 来 


必 想 灿 [算计 昼 习 从 亲 8 SSO 到 窒 册 Zr 小 


夏 珍 至 请 言 苛 天 





图 12-3 字体 风格 显示 
12.1.4 ”案例 4 一 一 设置 加 粗 字体 
通过 CSS 3 中 的 font-weight 属性 可 以 定义 字体 的 粗细 程度 ， 其 语法 格式 如 下 。 


{font-weight:100-900|boldlbolder|lighter|lnormal;} 

font-weight 属性 有 13 个 有 效 值 ， 分 别 是 bold、bolder、lighter、normal、100~900。 如 果 
没有 设置 该 属性 ， 则 使 用 其 默认 值 nommal。 属 性 值 设置 为 100~900， 值 越 大 ， 加 粗 的 程度 就 
越 高 。 具 体 含义 如 表 12-3 所 示 。 


有 GZ 


表 12-3 font-weight 属性 表 


值 描 述 
bold 定义 粗 体 字 体 
bolder 定义 更 粗 的 字体 ， 相 对 值 
lighter 定义 更 细 的 字体 ， 相 对 值 
normal 默认 ， 标 准 字体 





浏览 器 默认 的 字体 粗细 是 400， 另 外 也 可 以 通过 参数 lighter 和 bolder 使 字体 在 原 有 基础 
【 例 12.4】( 实 例文 件 : ch12\12.4.html) 


<1!1DOCTYPE html> 

<html> 

<body> 
<p style="font-weight:bold"> 梅 花香 自 苦寒 来 (bold) </p> 
<p style="font-weight:bolder"> 梅 花香 自 苦寒 来 (bolder)</p> 
<p style="font-weight:1ighter"> 梅 花香 自 苦寒 来 (1ighter)</p> 
<p style="font-weight:normal"> 梅 花香 自 苦寒 来 normal1)</p> 
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<p style="font-weight:100"> 梅 花香 自 苦 寒 来 (100) </p> 
<p style="font-weight:400"> 梅 花香 自 苦 寒 来 (400) </p> 
<p style="font-weight:900"> 梅 花香 自 苦寒 来 (900) </p> 
</body> 
</html> 


在 下 浏览 器 中 浏览 效果 如 图 12-4 所 示 ， 可 以 看 到 文字 以 不 同方 式 加 粗 ， 其 中 使 用 了 关 
键 字 加 粗 和 数值 加 粗 。 





























eg 全 HisersAdminist P - © X | @ HUsersWdministrator\.. x 
文件 ”所 抽 昌 查理 MW) 收 大 关内 工具 (姑且) 








梅花 香 自 苦寒 来 (bold) 
梅花 香 自 苦寒 来 (bolder) 
梅花 香 自 苦寒 可 (lightezr) 
梅花 香 自 苦寒 来 (pormal) 
梅花 香 自 苦寒 未 (100) 
梅花 理 自 苦 寒 来 (400) 
梅花 理 自若 夺 来 (900) 








图 12-4 字体 粗细 显示 
12.1.5 “案例 5 一 一 将 小 写字 母 转 为 大 写字 母 


font-variant 属性 设置 大 写字 母 的 字体 显示 文本 ， 这 意味 着 所 有 的 小 写字 母 均 会 被 转换 为 
大 写 ， 但 是 所 有 使 用 大 写字 体 的 字母 与 其 余 文 本 相 比 ， 其 字体 尺寸 更 小 。 在 CSS 3 中 ， 其 语 
法 格式 如 下 。 


font-variant : normal | small-caps |inherit 
font-variant 有 3 个 属性 值 ， 分 别 是 normal、inherit 和 small-caps。 具 体 含义 如 表 12-4 所 示 。 


表 12-4 font-variant 属性 表 


默认 值 。 浏 览 器 会 显示 一 个 标准 的 字体 


浏览 器 会 显示 小 型 大 写字 母 的 字体 
规定 应 该 从 父 元 素 继承 font-variant 属性 的 值 





【 例 12.5】( 实 例文 件 : chl2\12.5.htmD 


<1DOCTYPE html> 

<html> 

<body> 

<p style="font-variant:normal">Happy BirthDay to You</p> 

<p style="font-variant:small-caps">Happy BirthDay to You</p> 
</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-5 所 示 ， 可 以 看 到 字母 以 大 写 形式 显示 。 
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文件 (有) ”篇 名 {E) 。 坦 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 








Happy BirthDay to You 


HapPY BIRTADAY T0 YoU 








12-5 ”字母 大 小 写 转 换 


通过 图 12-5 中 对 两 个 属性 值 产生 的 效果 进行 比较 可 以 看 到 ， 设 置 为 normal 属性 值 的 文 
本 以 正常 文本 显示 ， 而 设置 为 small-caps 属性 值 的 文本 中 有 稍 大 的 大 写字 母 ， 也 有 小 的 大 写 
字母 ， 也 就 是 说 ， 使 用 了 small-caps 属性 值 的 段落 文本 全 部 变 成 了 大 写 ， 只 是 大 写字 母 的 尺寸 
不 同 。 


12.1.6 ”案例 6 一 一 设置 字体 的 复合 属性 


在 设计 网 页 时 ， 为 了 使 网 页 布局 合理 且 文本 规范 ， 对 字体 设计 需要 使 用 多 种 属性 ， 如 定 
义 字 体 粗 细 并 定义 字体 大 小 。 但 是 ， 多 个 属性 分 别 书写 相对 比较 麻烦 ， 在 CSS 3 样式 表 中 提 
供 了 font 属性 就 解决 了 这 一 问题 。 

font 属性 可 以 一 次 性 地 使 用 多 个 属性 的 属性 值 定义 文本 字体 。 语 法 格式 如 下 。 


{font:font-style font-variant font-weight font-size font-family} 


font 属性 中 的 属性 排列 顺序 是 font-style、font-variant、font-weight、font-size 和 font- 
family， 各 属性 的 属性 值 之 间 使 用 空格 隔 开 ， 如 果 font-family 属性 要 定义 多 个 属性 值 ， 则 需 使 
用 去 号 () 隔 开 。 


全 属性 排列 中 ，font-style、font-variant 和 font-weight 这 3 个 属性 值 是 可 以 自由 调换 
加 的 。 而 font-size 和 font-family 则 必须 按照 固定 的 顺序 出 现 ， 而 且 必须 都 出 现在 font 属 
”性 中 。 如 果 这 两 者 的 顺序 不 对 或 缺少 一 个 ， 那 么 ， 整 条 样式 规则 可 能 就 会 被 忽略 。 


【 例 12.6】( 实 例文 件 : ch12\12.6.html) 


<!DOCTYPE html> 
<html> 
<style type=text/css> 
Pt 
font :normal small-caps bolder 20pt "Cambria","Times New Roman", 宋体 
} 
</style> 
<body> 


<p> 

众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 
</p> 

</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-6 所 示 ， 可 以 看 到 文字 被 设置 成 宋体 并 加 粗 。 
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ee 
AUserswdminist 月 - © X | @ HAuserswdminis 
吉本 MV) 收 芒 夫 A。 工 上 (帮助 H) 


众 里 寻 他 千百度 ， 慕 然 回首 ， 那 
人 却 在 灯火 阑珊 处 。 


















图 12-6 复合 属性 font 显示 
12.1.7 ”案例 7 一 一 设置 字体 颜色 


在 CSS 3 样式 中 ， 通 常 使 用 color 属性 来 设置 颜色 。 属 性 值 通常 使 用 下 面 方式 设 定 ， 如 
表 12-5 所 示 。 





表 12-5 color 属性 值 





属性 值 说 明 
color name 规定 颜色 值 为 颜色 名 称 的 颜色 (例如 red) 
hex_number 颜色 (例如 #ftf0000) 
rgb_number | 规定 颜色 值 为 rgb 代码 的 颜色 (例如 rgb(255.0.0)) 
inherit 应 该 从 父 元 素 继承 颜色 





hsl number “| 规定 颜色 值 为 HSL 代码 的 颜色 (例如 hsl(0,75%.50%))， 此 为 CSS 3 新 增加 的 颜色 表现 方式 
hsla_number | 规定 颜色 只 为 HSLA 代码 的 颜色 (如 hsla(120,50%,50%.1))， 此 为 CSS 3 新 增加 的 颜色 表现 





方式 
rgba_number | 规定 颜色 值 为 RGBA 代码 的 颜色 (如 rgba(125.10.45.0.3))， 此 为 CSS 3 新 增加 的 颜色 表现 
方式 


【 例 12.7】( 实 例文 件 : ch12\12.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 

body {color:red} 

hl {color:#00ff£f00} 

p.ex {color:rgb(0,0,255)} 

p.hs{color:hsl (0,75%,50%)} 
p.ha{color:hsla(120,50%,50%,1)} 
p-.ra{color:rgba(125,10,45,0.5)} 

</style> 

</head> 

<body> 

<h1>《 青 玉 案 元 夕 》 </h1> 

<P> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 痣 珊 处 。 
</p> 

<p class="ex"> 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 阑珊 处 。 (该 段落 定义 了 
class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。) </p> 
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<p class="hs"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css 3 中 的 新 增 
加 的 HSL 函数 ， 构 建 颜色 。) </p> 

<p class="ha"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css 3 中 的 新 增 
加 的 HSLA 函数 ， 构 建 颜色 。) </p> 

<p class="ra"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css 3 中 的 新 增 
加 的 RGBA 函数 ， 构 建 颜色 。) </p> 

</body> 

</html> 


在 下 浏览 器 中 浏览 效果 如 图 12-7 所 示 ， 可 以 看 到 文字 以 不 同 颜色 显示 ， 并 采用 了 不 同 
的 颜色 取 值 方式 。 
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人 却 在 灯火 半 珊 处 。 《该 多 














度 ， 莫 然 加 苘 ， 那 人 却 在 灯火 并 珊 处，《 此 处 使 





图 12-7 color 属性 显示 


12.2 ”设置 文本 的 高 级 样式 


对 于 一 些 特殊 要 求 的 文本 ， 如 文字 存在 阴影 ， 字 体 种 类 发 生变 化 ， 如 果 再 使 用 上 面 所 介 
绍 的 CSS 样式 进行 定义 ， 其 结果 就 不 会 得 到 正确 显示 ， 这 时 就 需要 一 些 特定 的 CSS 标记 来 完 
成 这 些 要 求 。 


12.2.1 案例 8 一 一 设置 文本 阴影 效果 


在 显示 字体 时 ， 有 时 根据 需求 ， 需 要 给 出 文字 的 阴影 效果 ， 以 增强 网 页 整体 的 吸引 力 
并 且 为 文字 阴影 添加 颜色 。 这 时 就 需要 用 到 CSS 3 样式 中 的 text-shadow 属性 ， 实 际 上 ， 在 
CSS 2.1 中 ，W3C 就 已 经 定义 了 text-shadow 属性 ， 但 在 CSS 3 中 又 进行 了 重新 定义 ， 并 增加 
了 不 透明 度 效 果 。 语 法 格式 如 下 。 


{text-shadow : none | <length> none | [<shadow>，] * <opacity> 或 none | 
COEGE [oe <oOlor JY 
属性 值 如 表 12-6 所 示 。 


表 12-6 text-shadow 属性 值 






说 明 






属性 值 


<color> 








指定 颜色 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 可 为 负 值 。 指 定 阴影 的 水 平 延伸 距离 








<len: 
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续 表 
属性 值 


<opacity> 


说 明 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 指定 模糊 效果 的 作用 距离 。 
如 果 仅 需要 模糊 效果 ， 将 前 两 个 length 全 部 设 定 为 0 


text-shadow 属性 有 4 个 属性 值 ， 最 后 两 个 是 可 选 的 ， 第 1 个 属性 值 表示 阴影 的 水 平 位 
移 ， 可 取 正 负 值 ， 第 2 个 属性 值 表示 阴影 垂直 位 移 ， 可 取 正 负 值 ， 第 3 个 属性 值 表示 阴影 模 
糊 半径 ， 该 值 可 选 ， 第 4 个 属性 值 表示 阴影 颜色 值 ， 该 值 可 选 ， 如 下 所 示 。 

text-shadow: 阴 影 水 平 偏 移 值 (可 取 正 负 值 ); ”阴影 垂直 偏 移 值 (可 取 正 负 值 ); 阴影 模糊 值 ， 阴 影 颜 色 

【 例 12.8】( 实 例文 件 : ch12\12.8.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p align=center style="text-shadow:0.lem 2px 6px blue;font-size:80px; "> 这 是 
TextShadow 的 阴影 效果 </p> 

















</body> 
</html> 
在 Firefox 10.0 中 浏览 效果 如 图 12-8 所 示 ， 可 以 看 到 文字 居中 并 带 有 阴影 显示 。 
| mm a 
| DO fe users/Ad..nts/chio/10.8.html | + | 
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这 是 TextShadow 
的 阴影 效果 








图 12-8 ”阴影 显示 结果 图 


通过 上 面 的 实例 可 以 看 出 ， 阴 影 偏 移 由 两 个 length 值 指定 到 文本 的 距离 。 第 一 个 长 度 值 
指定 到 文本 右边 的 水 平 距离 ， 负 值 会 把 阴影 放置 在 文本 左边 。 第 二 个 长 度 值 指定 到 文本 下 边 
的 垂直 距离 ， 负 值 会 把 阴影 放置 在 文本 上 方 。 在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 


12.2.2 ”案例 9 一 一 设置 文本 溢出 效果 
text-overflow 属性 用 来 定义 当 文本 溢出 时 是 否 显示 省 略 标记 ， 即 定义 省 略 文本 的 显示 方 


式 ， 并 不 具备 其 他 的 样式 属性 定义 。 要 实现 溢出 时 产生 省 略 号 的 效果 还 必须 定义 : 强制 文本 
在 一 行内 显示 (white-space:nowrap) 及 溢出 内 容 为 隐藏 (overflow:hidden)， 只 有 这 样 才能 实现 滋 





H 文 本 显示 省 略 号 的 效果 。text-overflow 语法 如 下 。 


text-overflow : clip | ellipsis 


其 属性 值 含义 如 表 12-7 所 示 。 


表 12-7 ”text-overflow 属性 表 


EE 










说 明 
不 显示 省 略 标记 (...)， 而 是 简单 的 裁 切 条 
当 对 象 内 文本 溢出 时 显示 省 略 标 记 (...) 










【 例 12.9】( 实 例文 件 : ch12\12.9.html) 


<!DOCTYPE html> 
<html> 
<body> 
<style type="text/css"> 
test demo clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
width:200px; background:#ccc;} 
.test demo ellipsis{text-overflow:ellipsis; overflow:hidden; white-— 
space:nowrap; width:200px; 
background:#ccc;} 
</style> 
<h2>text-overflow : clip </h2> 
<div class="test demo clip"> 
不 显示 省 略 标记 ， 而 是 简单 的 裁 切 条 
</div> 
<h2>text-overflow : ellipsis </h2> 
<div class="test demo ellipsis"> 
显示 省 略 标记 ， 不 是 简单 的 裁 切 条 
</div> 
</body> 
</html> 


在 Firefox 10.0 中 浏览 效果 如 图 12-9 所 示 ， 可 以 看 到 文字 在 指定 位 置 被 裁 切 ， 但 ellipsis 
属性 没有 被 执行 。 在 正 浏览 器 中 浏览 效果 也 如 图 12-9 所 示 ， 可 以 看 到 ellipsis 属性 以 省 略 号 
形式 出 现 。 
"| | 厨 本 要 


Pe " x 时 bs x | 人 天 到 sn 
Oley//HUsechlo/10.8 himl 三 | fiey///H/Use--chio/log html < + || | 0 | Huserspdminist p - © x | @ Havsers dministr.. 


和 国 fle///H/Users/Adm cj 图 - ccccep| 四 ~ 县 全 文件 (D。 编 器 (5) ”前 看 (V) 收藏 夫 (A) 工具 (Tm 。 帮助 (H) 























text-overflow : clip text-overflow : clip 
不 显示 省 略 标记 ， 而 是 简单 和 不 显示 省 略 标 记 ， 而 是 简单 
text-overflow : ellipsis text-overflow : ellipsis 


显示 省 略 标记 ， 不 是 简单 … 显示 省 略 标记 ， 不 是 而 单 … 








12-9 文本 省 略 处 理 
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12.2.3 ”案例 10 一 一 设置 文本 的 控制 换行 


当 在 一 个 指定 区 域 显 示 一 整 行文 字 时 ， 如 果 文 字 在 一 行内 显示 不 完 时 ， 需 要 进行 换行 。 
如 果 不 进行 换行 ， 则 会 超出 指定 区 域 范围 ， 此 时 可 以 采用 CSS 3 中 新 增加 的 word-wrap 文本 
样式 来 控制 文本 换行 。 

word-wrap 语法 格式 如 下 。 


word-wrap : normal | break-word 


其 属性 值 含义 比较 简单 ， 如 表 12-8 所 示 。 
表 12-8 ”word-wrap 属性 表 








控制 连续 文本 换行 
break-word 内 容 将 在 边界 内 换行 。 如 果 需 要 ， 词 内 换行 (word-break) 也 会 发 生 








【 例 12.10】( 实 例文 件 ，ch12\12.10.html) 


<!DOCTYPE html> 
<html > 
<body> 
<style type="text/css"> 
div{ width:300px;word-wrap:break-word;border:lpx solid #999999;} 

</style> 
<div>wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword</ 
div><br> 

<div> 全 中 文 的 情况 ， 全 中 文 的 情况 ， 全 中 文 的 情况 全 中 文 的 情况 全 中 文 的 情况 
</div><br> 

<div>This is all English,This is all English,This is all 
English,This is all English,</div> 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-10 所 示 ， 可 以 看 到 文字 在 指定 位 置 被 控制 换行 。 











司 HaUsersWdminist P - © x | 总 HUsersAdministr.. x 
文 八 站 ”总 澡 () 喜 看 (V) 收 训 (A) 工具 0 帮助 (H) 


| rdwrapbreakwordwordwrapbreakwordwor 
(dwrapbreakwordwordsrapbreakword 














全 征文 的 情况 ， 全 中 文 的 情况 ， 全 中 文 的 | 
情况 全 中 文 的 情况 全 中 文 的 情况 


his is all Enelish, This is all 
ish, This is all English, This is 


11 English, 





12-10 文本 强制 换行 


可 以 看 出 ，word-wrap 属性 可 以 控制 换行 ， 当 属性 取 值 break-word 时 ， 将 强制 换行 ， 中 文 
文本 没有 任何 问题 ， 英 文 语句 也 没有 任何 问题 。 但 是 对 于 长 串 的 英文 就 不 起 作用 ， 也 就 是 


二 
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说 ，break-word 属性 控制 是 否 断 词 ， 而 不 是 断 字符 。 
12.2.4 ”案例 11 一 一 保持 字体 尺寸 不 变 

有 时 候 在 同一 行 的 文字 ， 由 于 所 采用 字体 种 类 不 一 样 或 者 修饰 样式 不 一 样 ， 而 导致 其 字 
体 尺寸 即 显示 大 小 不 一 样 ， 整 行文 字 看 起 来 就 显得 杂乱 。 此 时 需要 CSS 3 的 属性 标签 font- 
size-adjust 处 理 。 

font-size-adjust 用 来 定义 整个 字体 序列 中 ， 所 有 字体 的 大 小 是 否 保持 同一 个 尺寸 。 语 法 格 
式 如 下 。 

font-size-adjust : none | number 

其 属性 值 含义 如 表 12-9 所 示 。 

表 12-9 ”font-size-adjust 属性 表 


默认 值 。 允 许字 体 序列 中 每 一 字体 遵守 它 的 自己 的 尺寸 
为 字体 序列 中 所 有 字体 强迫 指定 同一 尺寸 





【 例 12.11】( 实 例文 件 ，ch12\12.11 html) 


<!DOCTYPE html> 
<html> 
<style> 
.big { font-family: sans-serif; font-size: 40pt; } 
.a { font-family: sans-serif; font-size: lS5pt; font-size-adjust: 1; } 
sD {Eont=—Famnily: sans serif, font- sizer SODE font Siz2e-adjusts O057 } 
</style> 
<body> 
<p class="big"><span class="b"> 厚 德 载 物 </span></p> 
<p class="big"><span class="a"> 厚 德 载 物 </span></p> 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-11 所 示 ， 可 以 看 到 同一 行 的 字体 大 小 相同 。 
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12.3 ”美化 网 页 中 的 段落 


网 页 中 有 文字 ， 而 用 来 表达 同一 个 意思 的 多 个 文字 组 合 ， 可 以 称 为 段落 。 段 落 是 文章 的 
基本 单位 ， 同 样 也 是 网 页 的 基本 单位 。 段 落 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 及 
风格 。CSS 样式 表 提 供 了 文本 属性 来 实现 对 页 面 中 段落 文本 的 控制 。 


12.3.1 案例 12 一 一 设置 单词 之 间 的 间隔 


单词 之 间 的 间隔 如 果 设 置 合理 ， 会 给 整个 网 页 布局 节省 空间 ， 二 者 可 以 给 人 赏心悦目 的 
感觉 ， 提 高 阅读 效果 。 在 CSS 中 ， 可 以 使 用 word-spacing 属性 直接 定义 指定 区 域 或 者 段落 中 
字符 之 间 的 间隔 。 

word-spacing 属性 用 于 设 定 词 与 词 之 间 的 间距 ， 即 增加 或 者 减少 词 与 词 之 间 的 间隔 。 语 法 
格式 如 下 。 


word-spacing : normal | length 


其 中 ， 属 性 值 normal 和 length 含义 如 表 12-10 所 示 。 








表 12-10 单词 间隔 属性 表 


默认 ， 定 义 单词 之 间 的 标准 间隔 
定义 单词 之 间 的 固定 宽带 ， 可 以 接受 正 值 或 负 值 





【 例 12.12】( 实 例文 件 : ch12\12.12.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="word-spacing:normal">Welcome to my home</p> 
<p style="word-spacing:15px">Welcome to my home</p> 
<p style="word-spacing:15px"> 欢 迎 来 到 我 家 </p> 

</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-12 所 示 ， 可 以 看 到 段落 中 的 单词 以 不 同 的 间隔 显示 。 


(3 司 huserswdminis P - © X | @ Husers dminis 


文件 (有 ” 编 纺 (E) ”前 看 (V) 收藏 夫 (A) 工具 [T) 才 动 (H) 























Welcome to my home 


Welcome to my hone 


欢迎 来 到 我 家 





12-12， 设 定 词 间隔 显示 


售 2a0 


人 全 ” ”从 上 面 显示 结果 可 以 看 出 ，word-spacing 属性 不 能 用 于 设 定 文字 之 间 的 间隔 。 


12.3.2 ”案例 13 一 一 设置 字符 之 间 的 间隔 


在 一 个 网 页 中 ， 词 与 词 之 间 可 以 通过 word-spacing 进行 设置 ， 那 么 字符 之 间 使 用 什么 设 
置 呢 ? 在 CSS 3 中 ， 可 以 通过 letter-spacing 来 设置 字符 文本 之 间 的 距离 ， 即 在 文本 字符 之 间 
插入 多 少 空间 ， 并 且 允 许 使 用 负 值 ， 这 样 会 使 字母 之 间 更 加 紧凑 。 语 法 格式 如 下 。 


letter-spacing : normal | length 


其 属性 值 含义 如 表 12-11 所 示 。 


表 12-11 字符 间隔 属性 表 


默认 间隔 ， 即 以 字符 之 间 的 标准 间隔 进行 显示 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 


【 例 12.13】( 实 例文 件 ，ch12\12.13.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style=" letter-spacing:normal">Welcome to my home</p> 
<p style=" letter-spacing:S5px">Welcome to my home</p> 
<p style="letter-spacing:1lex"> 这 里 的 字 间 距 是 lex</p> 

<p style="letter-spacing:-lex"> 这 里 的 字 间 距 是 -lex</p> 

<p style="letter-spacing:1lem"> 这 里 的 字 间 距 是 lem</p> 
</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-13 所 示 ， 可 以 看 到 文字 的 间距 大 小 不 同 。 














站 HAUsers dminist P ~ © X | 人 @ HUsersAdminist.. x| 
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Welcome to mr home 
Welcone to my hcne 


这 里 的 字 间 距 是 1ex 


这 里 的 





12-13” 字 间距 效果 


Oi 从 上 述 代码 中 可 以 看 出 ， 通 过 letter-spacing 定义 了 多 个 字 间 距 的 效果 ， 需 要 特别 
本 注意 ， 当 设置 的 字 问 距 是 -lex 时 ， 文 字 就 会 粘 到 一 决 . 
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12.3.3 ”案例 14 一 一 设置 文字 的 修饰 效果 


在 CSS 3 中 ，text-decoration 属性 是 文本 修饰 属性 ， 该 属性 可 以 为 页 面 提供 多 种 文本 的 修 
饰 效果 ， 例 如 ， 下 划 线 、 删 除 线 、 闪 烁 等 。 
text-decoration 属性 语法 格式 如 下 。 


text-decoration:none||underline||blink||overline||line-through 
其 属性 值 含义 如 表 12-12 所 示 。 


表 12-12 text-decoration 属性 值 




















属性 值 描 述 
none 默认 值 ， 对 文本 不 进行 任何 修饰 
underline 下 划 线 
overline 上 划 线 
line-through 删除 线 
blink 闪烁 


【 例 12.14】( 实 例文 件 ，ch12\12.14.html) 


<!DOCTYPE html> 

<html> 

<body> 
<p style="text-decoration:none"> 明 明知 道 相 思 苦 ， 偏 偏 对 你 牵 肠 挂 肚 ! </p> 
<p style="text-decoration:underline"> 明 明知 道 相 思 苦 ， 偏 偏 对 你 牵 肠 挂 肚 ! </p> 
<p style="text-decoration:overline"> 明 明知 道 相 思 苦 ， 偏 偏 对 你 牵 肠 挂 肚 ! </p> 
<p style="text-decoration:line-through"> 明 明知 道 相 思 苦 ， 偏 偏 对 你 牵 肠 挂 肚 ! </p> 
<p style="text-decoration:blink"> 明 明知 道 相思 苦 ， 偏 偏 对 你 牵 肠 挂 肚 ! </p> 



































</body> 
</html> 
打开 下 9.0， 显 示 效 果 如 图 12-14 所 示 。 可 以 看 到 段落 中 出 现 了 下 划 线 、 上 划 线 和 删除 
吕 目 Huserswdminst 只- OX 
文 站 (站 ”党 (E) 豆 看 V) ， 收 站 夫 [ 内 工具 0) 雾 助 0 
明明 知 诈 相 思 苦 ， 售 偏 对 你 幸 扬 持 肝 | 
明明 知 谱 相 思 苦 ， 仿 偏 对 你 广 历 持 肚 
12-14 文本 修饰 显示 
了 了 


这 里 需要 注意 的 是 : blink 闪烁 效果 只 有 Mozilla 和 Netscape 浏览 器 支持 ， 而 下 
背 滩 和 其 他 浏览 器 Gz opera 部 不 支持 该 效果 . 
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12.3.4 ”案例 15 一 一 设置 垂直 对 齐 方 式 


在 CSS 二 
基线 相对 于 该 
低 而 不 是 升 高 


vertical-al 





Ph， 可 以 直接 使 用 vertical-align 属性 设 定 垂直 对 齐 方 式 。 该 属性 定义 行内 元 素 的 
元 素 所 在 行 的 基线 的 垂直 对 齐 ， 允 许 指定 负 长 度 值 和 百分比 值 ， 这 会 使 元 素 降 
。 在 表单 元 格 中 ， 属 性 会 设置 单元 格 框 中 的 单元 格 内 容 的 对 齐 方式 。 

ign 属性 语法 格式 如 下 。 


{vertical-align: 属 性 值 } 


vertical-al 
所 示 。 


ign 属性 值 有 8 个 预 设 值 可 使 用 ， 也 可 以 使 用 百分比 。 这 8 个 预 设 值 如 表 12-13 


表 12-13 vertical-align 属性 值 





属性 值 说 明 
baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 
sub 垂直 对 齐 文本 的 下 标 
super 垂直 对 齐 文本 的 上 标 
to 将 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 








middle 
bottom 


text-bottom 


将 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 


将 此 刀 置 在 父 元 素 的 中 部 
将 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
将 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 








【 例 12.1S】( 实 例文 件 : ch12\12.15.html) 


<!DOCTYPE html> 


<html> 
<body> 
<p> 


世界 杯 <b style=" font-size:8pt;vertical-align:super">2014</b>! 


加 油 ! 
</p> 
<p><img 


</p> 
<hr/> 


中 国 队 <b style="font-size: 8pt;vertical-align: sub">[ 注 ]</b>! 


<img src="1.gif" style="vertical-align: baseline"> 


src="2.gif" style="vertical-align:middle"/> 


世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:top"> 


<p ><img src="2.gif" style="vertical-align:middle"/> 


</p> 
<p><img 


</p> 
<hr/> 


世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-top"> 


src="2.gif" style="vertical-align:middle"/> 


世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:bottom"> 


<p ><img src="2.gif" style="vertical-align:middle"/> 








世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-bottom"> 
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</p> 

<p> 
世界 杯 <b style=" font-size:8pt;vertical-align:100%">2008</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align: -100%">[ 注 ]</b>! 
加 油 ! <img src="1.gif" style="vertical-align: baseline"> 

</p> 

</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 12-15 所 示 ， 可 以 看 到 文字 在 垂直 方向 以 不 同 的 对 齐 方 式 


| 
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人 
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] 世界 杯 ! 中 国 队 ! 加 波 ! 总 





图 12-15 垂直 对 齐 显 示 


从 实例 中 可 以 看 出 ， 上 下 标 在 页 面 中 的 数学 运算 或 注释 标号 使 用 的 比较 多 。 顶 端 对 齐 有 
两 种 参照 方式 ， 一 种 是 参照 整个 文本 块 ， 一 种 是 参照 文本 。 底 部 对 齐 同 项 端 对 齐 方式 相同 ， 
分 别 参照 文本 块 和 文本 块 中 包含 的 文本 。 


Vertical-align 属性 值 还 能 使 用 百分比 来 设 定 重 直 高 度 ， 该 高 度 具 有 相对 性 ， 是 基 
xs 于 行 高 的 值 来 计算 的 ， 而 且 百分比 值 还 能 使 用 正 负 号 表示 ， 正 百分比 使 文本 上 升 ， 负 
百分比 使 文本 下 降 。 


12.3.5 “案例 16 一 一 转换 文本 的 大 小 写 


根据 需要 ， 将 小 写字 母 转换 为 大 写字 母 ， 或 者 将 大 写字 母 转换 为 小 写 ， 在 文本 编辑 中 都 


是 很 常见 的 。 在 CSS 样式 中 ，text-transform 属性 可 用 于 设 定 文本 字体 的 大 小 写 转 换 。text- 
transform 属性 语法 格式 如 下 。 


text-transform : none | capitalize | uppercase | lowercase 


其 属性 值 含义 如 表 12-14 所 示 。 
因为 文本 转换 属性 仅 作 用 于 字母 型 文本 ， 相 对 来 说 比较 简单 。 


属性 值 


表 12-14 ”text-transform 的 属性 值 


说 明 





none | 


无 转换 发 生 





capitalize 


lowercase 


将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 


【 例 12.16】( 实 例文 件 ，ch12\12.16.html) 


<!DOCTYPE html> 
<html> 
<body style="font 





-size:1l5pt; font-weight:bold"> 


<p style="text-transform:none">welco 
<p style="text-transform:capitalize" 
<p style="text-transform:lowercase"»> 
<p style="text-transform:uppercase"> 


</body> 
</html> 


me to home</p> 

>welcome to home</p> 
WELCOME TO HOME</p> 
welcome to home</p> 


在 正 浏 览 器 中 浏览 效果 如 图 12-16 所 示 ， 可 以 看 到 字母 以 大 写字 母 显示 。 





( | e) H\UsersAdminist P ~ 


welcome to home 
Welcome To Home 
welcome to home 


WELCOME TO HOME 





| 
© Xx | @ HAUsers Administr., 
工具 mn) 帮助 (H) 


文件 (名 缠 (E) 评 看 V) 收藏 (A) 





12-16 ”大 小 写字 母 转换 显示 


12.3.6 ”案例 17 一 一 设置 文本 的 水 平 对 齐 方式 








一 般 情况 下 ， 居 中 对 齐 适用 于 标题 类 文本 ， 























text=-aligqn: STexztAlign } 


其 属性 值 含义 如 表 12-15 所 示 。 








在 新 增加 的 属性 值 中 


或 尾部 显示 ， 而 <string> 属 性 值 3 


Ph，start 和 end 属性 值 3 


其 他 对 齐 方式 可 以 根据 页 面 布局 来 选择 使 


用 。 根 据 需 要 ， 可 以 设置 多 种 对 齐 方 式 ， 如 水 平方 向 上 的 居中 、 左 对 齐 、 右 对 齐 或 者 两 端 对 
齐 等 。 在 CSS 中 ， 可 以 通过 text-align 属性 进行 设置 。 

text-align 属性 用 于 定义 对 象 文本 的 对 齐 方式 ,与 CSS 2.1 相 比 ，CSS 3 增加 了 start、end 
和 string 属性 值 。text-align 语法 格式 如 下 。 


要 是 针对 行内 元 素 的 ， 即 在 包含 元 素 的 头 部 








E 要 用 于 表格 单元 格 中 ， 将 根据 某 个 指定 的 字符 对 齐 。 


回国 
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表 12-15 text-align 属性 表 























属性 值 说 明 

Start 文本 向 行 的 开始 边缘 对 齐 
end 文本 向 行 的 结束 边缘 对 齐 
left 文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 开始 边缘 对 齐 
Tight 文本 向 行 的 右边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 结束 边缘 对 齐 
center 文本 在 行内 居中 对 齐 
justify 文本 根据 text-justify 的 属性 设置 方法 分 散 对 齐 ， 即 两 端 对 齐 ， 均 匀 分 布 





match-parent | 继承 父 元 素 的 对 齐 方式 ， 但 有 个 例外 : 继承 的 start 或 者 end 值 是 根据 父 元 素 的 
direction 值 进行 计算 的 ， 因 此 计算 的 结果 可 能 是 left 或 者 right 








<string> string 是 一 个 单个 的 字符 ， 否 则 就 忽略 此 设置 ， 按 指定 的 字符 进行 对 齐 。 此 属性 可 以 与 其 
他 关键 字 同 时 使 用 ， 如 果 没有 设置 字符 ， 则 默认 值 是 end 方式 
inherit 继承 父 元 素 的 对 齐 方式 


【 例 12.17】( 实 例文 件 ，ch12\12.17.html) 


<!DOCTYPE html> 
<html> 
<body> 
<hl style="text-align:center"> 登 幽 州 台 歌 </h1> 
<h3 style="text-align:left"> 选 自 : </h3> 
<h3 style="text-align:right"> 
<img src="1.gif" /> 
唐诗 三 百 首 </h3> 
<p style="text-align:justify"> 
前 不 见 古 人 
后 不 见 来 者 
(这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 ，) 
</p> 
<p style="text-align:strat"> 念 天 地 之 悠悠 </p> 
<p style="text-align:end"> 独 恰 然 而 涕 下 </p> 




















</body> 
</html> 
在 正 浏览 器 中 浏览 效果 如 图 12-17 所 示 ， 可 a 
以 看 到 文字 在 水 平方 向 上 以 不 同 的 对 齐 方 式 显示 。 EO reer weninin p ET 
文件 (月 ” 妨 贺 人 ) ”可 看 (V) 收 蕊 夫 (A) 工具 帮助 (H) 
全 text-align 属性 只 能 用 于 文本 块 ， 而 登 费 州 台 歌 
| 长 不 能 直接 应 用 到 图 像 标记 <img>。 如 果 要 


使 图 像 同文 本 一 样 应 用 对 齐 方式 ， 那 么 就 

必须 将 图 像 包含 在 文本 块 中 。 如 例 12.17 

中 ， 由 于 向 右 对 齐 方式 作用 于 <h3> 标 记 

定义 的 文本 块 ， 图 像 包含 在 文本 块 中 ， 

所 以 图 像 能 够 同文 本 一 样 向 右 对 齐 。 nal - 
图 12-17 “对齐 效果 








储 。 让 诗 三 百 首 = 
从 局 TR 者 《这 必 个 测 这 是 一 人 这 






才 修 
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en CSS 只 能 定义 两 端 对 齐 方式 ， 并 按 要 求 显示 ， 但 对 于 有 具体 的 两 端 对 齐 文本 如 何 分 
六 配 字体 空间 ， 以 实现 文本 左右 两 边 均 对 齐 ，CSS 并 不 规定 ， 需 要 设计 者 自行 定义 。 


12.3.7 ”案例 18 一 一 设置 文本 的 缩 进 效果 


在 普通 段落 中 ， 通 常 首 行 缩 进 两 个 字符 ， 用 来 表示 这 是 一 个 段落 的 开始 。 同 样 ， 在 网 页 
的 文本 编辑 中 ， 可 以 通过 指定 属性 来 控制 文本 缩 进 。CSS 的 text-indent 属性 就 用 来 设 定 文本 
块 中 首 行 的 缩 进 。 

text-indent 属性 的 语法 格式 如 下 。 


text-indent : length 


其 中 ，length 属性 值 表示 有 百分比 数字 或 有 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 
为 负 值 。 可 以 这 样 认为 ，text-indent 属性 可 以 定义 两 种 缩 进 方式 ， 一 种 是 直接 定义 缩 进 的 长 
度 ， 另 一 种 是 定义 缩 进 百 分 比 。 使 用 该 属性 ，HTML 任何 标记 都 可 以 让 首 行 以 给 定 的 长 度 或 
百分比 缩 进 。 

【 例 12.18】( 实 例文 件 ，ch12\12.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="text-indent:10mm"> 

此 处 直接 定义 长 度 ， 直 接 缩 进 。 

</p> 

<p style="text-indent:10%"> 
此 处 使 用 百分比 ， 进 行 缩 进 。 

</p> 

</body> 

</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-18 所 示 ， 可 以 看 到 文字 以 首 行 缩 进 方式 显示 。 
如 果 上 级 标记 定义 了 text-indent 属性 ， 那 么 子 标记 可 以 继承 其 上 级 标记 的 缩 进 长 度 。 





条 起 册 穿 州 别 习 人头 亲 8 SSO 池 窒 “ 贡 Z+ 小 熏 


罗 A 




















此 处 直接 定义 长 度 ， 直 接 缩 进 。 
此 处 使 用 百分比 ， 进 行 缩 进 。 





图 12-18 ” 缩 进 显 示 
12.3.8 ”案例 19 一 一 设置 文本 的 行 高 
在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 语 法 格式 如 下 。 


line-height : normal | length 
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其 属性 值 的 具体 含义 如 表 12-16 所 示 。 
表 12-16 行 高 属性 值 





属性 值 说 明 
normal 默认 行 高 ， 即 网 页 文本 的 标准 行 高 
length 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 是 基 
于 字体 的 高 度 尺寸 





【 例 12.19】( 实 例文 件 : ch12\12.19.html) 


<!DOCTYPE html> 
<html> 
<body> 
<div style="text-indent:10mm;"> 
<p style="line-height:50px"> 
世界 杯 (World Cup, FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足球 锦标 赛 ) 是 世界 上 最 
高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> <p style="line-height:50%"> 
世界 杯 (World Cup, FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足球 锦标 赛 ) 是 世界 上 最 高 
He 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> 
</div> 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-19 所 示 ， 可 以 看 到 有 有 段 文字 重合 在 一 起 ， 即 行 高 设置 较 小 。 


外 可 HUsers dninist D ~ CX] HsersWdminsw x| | Bs 


文件 (F) 病名 (E) 全 看 (V) 要 罕 夫 A) 工具 (1 起 (H) 








世界 杯 《World Cup, FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足 


球 锦标 赛 ) 是 世界 上 最 高 水 平 的 足球 比赛 ， 与 奥运 会 、Fi 并 称 为 全 球 三 
大 顶级 赛事 。 
A 





图 12-19 设 定 文本 行 高 显示 


12.3.9 “案例 20 一 一 文本 的 空白 处 理 


在 CSS 中 ，white-space 属性 用 于 设置 对 象 内 空格 字符 的 处 理 方式 。 与 CSS 2.1 相 比 ， 
CSS 3 新 增 了 两 个 属性 值 。white-space 属性 对 文本 的 显示 有 着 重要 的 影响 ， 在 标记 上 应 用 
white-space 属性 ， 可 以 影响 浏览 器 对 字符 串 或 文本 间 空 白 的 处 理 方式 。 

white-space 属性 语法 格式 如 下 。 


white-space :normal | pre | nowrap | pre-wrap | pre-line 


其 属性 值 含 义 如 表 12-17 所 示 。 
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表 12-17 空白 属性 表 S| 

本 | 

属性 值 说 明 全 
normal 默认 。 空 白 会 被 浏览 器 忽略 司 
pre 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 <pre> 标签 9 
nowrap 文本 不 会 换行 ， 文 本 会 在 同一 行 上 继续 ， 直 到 遇 到 <br> 标签 为 止 美 
pre-wrap 保留 空白 符 序列 ， 但 是 进行 正常 换行 . 
re-line 合并 空白 符 序列 ， 但 是 保留 换行 符 页 
inherit 规定 应 该 从 父 元 素 继承 _white-space 属性 的 值 计 
与 

【 例 12.20】( 实 例文 件 : ch12\12.20.html) 是 





<!DOCTYPE html> 
<html> 
<body> 
<hl style="color:red; text-align:center;white-space:pre"> 蜂 蜜 的 功效 与 作用 ! </hl> 
<div > 
<p style="white-space:nowrap;text-indent:10mm"> 
蜂蜜 ， 是 昆虫 蜜蜂 从 开花 植物 的 花 中 采 得 的 花蜜 在 蜂巢 中 酿 制 的 蜜 。<br> 
蜂蜜 的 成 分 除了 葡萄 糖 、 果 糖 之 外 还 含有 各 种 维生素 、 矿 物质 和 氨基 酸 。1 千克 的 蜂蜜 含有 2940 卡 的 
热量 。 蜂 蜜 是 糖 的 过 饱和 溶液 ， 低 温 时 会 产生 结晶 ， 生 成 结晶 的 是 葡萄 糖 ， 不 产生 结晶 的 部 分 主要 是 果糖 。 
</p> 
<p style="white-space:pre-wrap;text-indent:10mm"> 
蜂蜜 的 成 分 除了 和 葡萄糖 、 果 糖 之 外 还 含有 各 种 维生素 、 矿 物质 和 氨基 酸 。 
1 千克 的 蜂蜜 含有 2940 卡 的 热量 。<br/> 
蜂蜜 是 糖 的 过 饱和 溶液 ， 低 温 时 会 产生 结晶 ， 生 成 结晶 的 是 葡萄 糖 ， 不 产生 结晶 的 部 分 主要 是 果糖。 
</p> 
<p style="white-space:pre-line;text-indent:10mm"> 
蜂蜜 的 成 分 除了 葡 茵 糖 、 果 糖 之 外 还 含有 各 种 维生素 、 矿 物质 和 氨基 酸 。 
1 千克 的 蜂蜜 含有 2940 卡 的 热量 。<br/> 
蜂蜜 是 糖 的 过 饱和 溶液 ， 低 温 时 会 产生 结晶 ， 生 成 结晶 的 是 葡萄 糖 ， 不 产生 结晶 的 部 分 主要 是 果糖。 


有 GZ 


</p> 

</div> 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-20 所 示 ， 可 以 看 到 文字 空白 处 理 的 不 同方 式 。 
| 本 本 EE 
[SS rr Er oe 








生成 结 蝇 的 县 莘 苇 畏 ， 不 产生 结 生 的 等 人 主要 是 录 杭 


、 大 物质 和 扣 基 本 < 












12-20 ”空白 处 理 显示 
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12.3.10 ”案例 21 一 一 文本 的 反 排 


在 网 页 文本 编辑 中 ， 通 常 英语 文档 的 基本 方向 是 从 左 至 右 。 如 果 文 档 中 某 一 段 的 多 个 部 
分 包含 从 右 至 左 阅读 的 语言 ， 则 该 语言 的 方向 将 正确 地 显示 为 从 右 至 左 。 此 时 可 以 通过 CSS 
提供 的 两 个 属性 unicode-bidi 和 direction 解决 文本 反 排 的 问题 。 

unicode-bidi 属性 语法 格式 如 下 。 


unicode-bidi : normal | bidi-override | embed 
其 属性 值 含义 如 表 12-18 所 示 。 


表 12-18 ”unicode-bidi 属性 表 





属性 值 说 明 

默认 值 。 元 素 不 会 打开 一 个 额外 的 嵌入 级 别 。 对 于 内 联 元 素 ， 隐 式 地 重新 排序 将 跨 元 素 边 
界 而 起 作用 

与 embed 值 相 同 ， 但 这 一 点 除外 : 在 元 素 内 ， 重 新 排序 依照 direction 属性 严格 按 顺序 
进行 。 此 值 蔡 代 隐 式 双向 算法 

元 素 将 打开 一 个 额外 的 嵌入 级 别 。 direction 属性 的 值 指定 嵌入 级 别 。 重 新 排序 在 元 素 内 
是 隐 式 进行 的 


direction 属性 用 于 设 定 文本 流 的 方向 ， 其 语法 格式 如 下 。 
dlrection 臣下 ty | dnherit 
其 属性 值 含义 如 表 12-19 所 示 。 


表 12-19 direction 属性 值 


normal 


bidi-override 


embed 











属性 值 说 明 
ltr 文本 流 从 左 到 右 
rt 文本 流 从 右 到 左 
inherit 文本 流 的 值 不 可 继承 


【 例 12.21】( 实 例文 件 : ch12\12.21.html) 


<1DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
a {color:#000;} 
</style> 

</head> 

<body> 
<h3> 文 本 的 反 排 </h3> 

<div style=" direction:rtl; unicode-bidi:bidi-override; text-align:left"> 秋 
风 吹 不 尽 ， 总 是 玉 关 情 。 


</div> 


全 2 


</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 12-21 所 示 ， 可 以 看 到 文字 以 反 转 形式 显示 。 
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12-21 文本 反 转 显示 


12.4 ”综合 案例 1 一 一 设置 网 页 标题 


本 节 创 建 一 个 网 站 的 网 页 标题 ， 主 要 利用 文字 和 段落 方面 的 CSS 属性 。 具 体 的 操作 步骤 

如 下 。 
ET 分 析 需 求 。 
本 综合 实例 的 要 求 如 下 ， 要 求 在 网 页 的 最 上 方 显示 出 标题 ， 标 题 下 方 是 正文 ， 其 中 正文 
部 分 是 文字 段落 部 分 。 在 设计 这 个 网 页 标题 时 ， 需 要 将 网 页 标题 加 粗 ， 并 将 网 页 居中 显示 ， 
用 大 号 字体 显示 标题 ， 以 和 下 面 正文 区 分 。 上 述 要 求 使 用 CSS 样式 属性 实现 。 实 例 效 果 如 
图 12-22 所 示 。 


2 CT 
文件 (有 | 蝙 往 (E) 要 天 (V) ”收藏 衬 工具 [基地 (H) 
蜂王 浆 的 作用 与 功效 
搜狐 网 2014 年 03 月 0 日 | 


4、 辅助 降低 血糖 。 此 作用 主要 因 其 合 有 的 肤 鸟 素 样 肘 类 推理 得 未 ， 阁 乌 素 样 状 类 是 治疗 
糖尿 病 的 特效 药物 。 


2、 抗 楷 化 功效 。 此 作 骨 是 蜂王 的 被 大 众 昔 亿 肯定 的 作用 ， 它 对 组 胞 的 修复 以 及 再 生 具有 
根 强 的 作用 。 在 蜂王 桨 中 栓 神 出 的 超 所 化 物 睹 化 柄 (S00) 是 抗 和 化 的 主要 成 分 。 

3、 降低 血 府 。 妖 王浆 含有 人 体 必须 的 纤 生 素 达 10 种 以 上 ， 荡 平 街 记 芒 代谢 和 糖 代谢 ， 可 
阵 心 肥 如 者 的 训 血 良 和 高 血 粹 ， 非 常 适 合肥 有 型 情 尿 病 患 者 。 


4、 控制 血管 扩张 、 降 低 血压 。 这 个 结论 来 自 于 苦 所 窜 的 10- 凑 基 - 壬 糯 醇 王 交 获 ) 以 及 王 
浆 主要 提 白 -1 





























12-22 ”网 页 标题 显示 


分 析 布局 并 构建 HTML。 

首先 需要 创建 一 个 HTML 页 面 ， 并 用 DIV 将 页 面 划 分 为 两 个 层 ， 一 个 是 网 页 标题 层 ， 一 
个 是 正文 部 分 。 

导入 CSS 文件 。 

在 HITML 页 面 ， 将 CSS 文件 使 用 link 方式 ， 导 入 到 HTML 页 面 中 。 该 CSS 页 面 定义 了 
这 个 页 面 的 所 有 样式 ， 其 导入 代码 如 下 。 
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<link href="index.css" rel="stylesheet" type="text/css" /> 


完成 标题 样式 设置 。 
首先 设置 标题 的 HTML 代码 ， 此 处 使 用 DIV 构建 ， 其 代码 如 下 。 
<div> 
<h1> 蜂 王浆 的 作用 与 功效 </h1> 
<div class="ar"> 搜 狐 网 2014 年 03 月 01 日 <span ></div> 
</div> 





使 用 CSS 代码 对 其 进行 修饰 ， 其 代码 如 下 。 


hl{text-align:center;color:red} 
-ar{text-align:right;font-size:15px;} 
:lr{text-align:left;font-size:15px;color:} 


开发 正文 部 分 代码 和 样式 。 
首先 使 用 HTML 代码 完成 网 页 正文 部 分 ， 此 处 使 用 DIV 构建 ， 其 代码 如 下 。 


<div > 


<P> 

人 此 作用 主要 因 其 含有 的 胰岛 素 样 肽 类 推理 得 来 ， 胰 岛 素 样 肽 类 是 治疗 糖尿 病 的 

2 

<P> 

2. 抗 氧 化 功效 。 此 作用 是 蜂王 浆 被 大 众 普遍 肯定 的 作用 ， 对 细胞 的 修复 以 及 再 生 具 有 很 强 的 作 

用 。 在 蜂王 桨 中 检测 出 的 超 氧化 物 歧 化 酶 (soD) 是 抗 氧 化 的 主要 成 分 。 

</P > 

<P > 

3。 降低 血脂 。 蜂 王浆 含有 人 体 必须 的 维生素 达 10 种 以 上 ， 能 平衡 脂肪 代谢 和 糖 代谢 ， 可 降低 肥 

胖 者 的 高 血脂 和 高 血糖 ， 非 常 适合 肥胖 型 糖尿 病 患 者 。 

ep 

<P> 

ns 降低 血压 。 这 个 结论 来 自 于 其 所 含 的 12- 羟 基 - 炎 烯 酸 (王浆 酸 ) 以 及 王浆 主要 
=Te </PS> 


</div> 


EEC 使 用 CSS 代码 进行 修饰 ， 其 代码 如 下 。 


p{text-indent:8mm;line-height:7mm;} 


12.5 ”综合 案例 2 一 一 制作 新 闻 页 面 


本 实例 来 制作 一 个 新 闻 页 面 ， 具 体 的 操作 步骤 如 下 。 
ED 打开 记事 本 ， 在 其 中 输入 如 下 代码 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 新 闻 页 面 </title> 
<style type="text/css"> 
| 

hl{font-family: 黑 体 ; 
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text-decoration:underline overline; 
text-align:center; 
} 
p{ font-family: Arial, "Times New Roman™; 
font-size:20px; 
margin:5px Opx; 
text-align:justify; 
} 
#p1{ 
font-style:italic; 
text-transform:capitalize; 
word-spacing:15px; 
letter-spacing:-1px; 
text-indent:2em; 
， 
#p2{ 
text-transform: lowercase; 
text-indent:2em; 
line-height:2; 
, 
#firstLettert{ 
font-size:3em; 
float:left; 
ly 







各 起 J 算 州 喇 司 居 亲 8 SSO 于 


hli 
background:#678; 
color:white; 
} 
--> 
</style> 
</head> 
<body> 
<h1> 英 国 现 两 个 多 世纪 来 最 多 雨 冬 天 </h1> 
<p id="pl"> 在 3 月 的 第 一 天 ， 阳 光 “ 重 返 ” 英 国 大 地 ， 也 预示 着 春天 的 到 来 。</P> 
<p id="p2"> 英 国 气象 局 发 言 人 表示 : “今天 的 阳光 很 充足 ， 这 才 像 春天 的 感觉 。 这 是 春天 的 一 
个 非常 好 的 开局 。” 前 几 天 英国 气象 局 发 布 的 数据 显示 ， 刚 刚 过 去 的 这 个 冬天 是 过 去 近 250 年 来 
最 多 雨 的 冬天 。</p> 
</body> 
</html> 


保存 网 页 ， 在 正 浏览 器 中 预览 效果 如 图 12-23 所 示 。 























美国 现 两 个 多 世纪 来 最 多 十 冬天 


站 3 月 声 茵 一 天 ， 庙 治 硬 反 由 膨大 奶 ， 直 闹 示 性 半天 所 到 实 。 


英国 气象 局 发 言 人 表示 :“ 今 天 的 阳光 很 充足 ， 这 才 像 春天 的 感 
沉 。 这 是 春天 的 一 个 非常 好 的 开局 ," 前 几 天 英国 气象 局 发 布 的 数据 显 
， 刚刚 过 去 的 这 个 冬天 是 过 去 近 250 年 来 最 多 雨 的 冬天 - 





12-23 ”浏览 效果 
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12.6 高 手 甜 点 


甜点 1: 字体 为 什么 在 其 他 计算 机 上 不 显示 ? 

楷体 很 漂亮 ， 草 书 也 不 逊色 于 宋体 ， 但 不 是 所 有 人 的 计算 机 上 都 安装 有 这 些 字体 ， 所 以 
在 设计 网 页 时 ， 不 要 为 了 追求 漂亮 美观 而 采用 一 些 比较 新 奇 的 字体 。 有 时 这 样 往往 反而 达 不 
到 效果 。 用 最 基本 的 字体 ， 是 最 好 的 选择 。 


SN 不 要 使 用 难于 阅读 的 花哨 字体 。 当 然 ， 某 些 字 体 可 以 让 网 站 精彩 纷呈 ， 但 是 它们 容易 阅 
NN 读 吗 ? 网 页 的 主要 目的 是 传递 信息 并 供 读者 阅读 ， 应 该 使 读者 阅读 过 程 舒服 些 。 另 外 ， 也 不 








要 用 小 字体 ， 虽 然 Firefox 浏览 器 有 放大 功能 ， 但 如 果 必 须 放大 才能 看 清 一 个 网 站 的 话 ， 相 信 
读者 以 后 再 也 不 会 去 访问 它 了 。 


甜点 2: 网 页 中 的 空白 处 理 吗 ? 


注意 不 留 空白 。 不 要 用 图 像 、 文 本 和 不 必要 的 动画 GIF 来 充斥 网 页 ， 即 使 有 足够 的 空 
间 ， 在 设计 时 也 应 该 避免 使 用 。 


甜点 3: 文字 和 图 片 导航 速度 谁 快 ? 


应 使 用 文字 做 导航 栏 。 文 字 导 航 不 仅 速度 快 ， 而 且 更 稳定 。 例 如 ， 有 些 用 户 上 网 时 会 关 
闭 图 片 。 在 处 理 文本 时 ， 不 要 在 普通 文本 上 添加 下 划 线 或 者 颜色 。 除 非特 别 需 要 ， 否 则 不 要 
为 普通 文字 添加 下 划 线 。 就 像 用 户 需要 识别 哪些 能 点 击 一 样 ， 读 者 不 应 当 将 本 不 能 点 击 的 文 
字 误 认为 能 够 点 击 。 


12.7” 跟 我 练 练 手 


练习 1: 制作 一 个 使 用 CSS 3 美化 网 页 文字 的 例子 。 

练习 2: 制作 一 个 包括 文本 阴影 、 溢 出 和 保持 字体 尺寸 不 变 的 例子 。 
练习 3: 制作 一 个 美化 网 页 段落 的 例子 。 

练习 4: 制作 一 个 包含 五 彩 标题 的 例子 。 

练习 5: 制作 一 个 新 闻 页 面 的 例子 。 
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13.1 美化 表格 样式 


在 传统 网 页 设计 中 ， 表 格 一 直 占 有 比较 重要 的 地 位 ， 使 用 表格 排版 网 页 ， 可 以 使 网 页 更 
美观 ， 条 理 更 清晰 ， 更 易于 维护 和 更 新 。 


13.1.1 案例 1 一 一 设置 表格 边框 样式 


在 显示 表格 数据 时 ， 通 常 都 带 有 表格 边框 ， 用 来 界定 不 同 单元 格 的 数据 。 当 table 表格 的 
描述 标记 border 值 大 于 0 时 ， 显 示 边 框 ， 如 果 border 值 为 0， 则 不 显示 边框 。 边 框 显示 之 
后 ， 可 以 使 用 CSS 3 的 border-collapse 属性 对 边框 进行 修饰 。 语 法 格式 如 下 。 


border-collapse : separate | collapse 


其 中 separate 是 默认 值 ， 表 示 边 框 会 被 分 开 ， 不 会 忽略 border-spacing 和 empty-cells 属 
性 ， 而 collapse 属性 表示 边框 会 合并 为 一 个 单一 的 边框 ， 会 忽略 border-spacing 和 empty-cells 
属性 。 

【 例 13.1】( 实 例文 件 ，ch13\13.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 家 庭 季度 支出 表 </title> 
<style> 
| am 
.七 abelisti{ 
border:1lpx solid #429fff; /* 表格 边框 */ 
font-family:" 楷 体 "; 
border-collapse:collapse; /* 边框 重合 */ 
} 
.tabelist caption{ 
padding-top:3px; 
padding-bottom: 2px; 
font-weight:bolder; 
font-size:15px; 
font-family:" 幼 圆 "; 
border:2px solid #429fff; /* 表格 标题 边框 */ 
上 
.tabelist tht{ 
font-weight:bold; 
text-align:center; 
} 
.tabelist tadaf{ 
border:1px solid #429fff;  /* 单元 格 边框 */ 
text-align:right; 
padding:4px; 
} 
一 -> 
</style> 








全 2 





cs 当年 
训 


</head> 
<body> 
<table class="tabelist"> 
<caption class="tabelist"> 
2016 季度 07-09 
</caption> 
EP 
<th> 月 份 </th> 
<th>07 月 </th> 
<th >08 月 </th> 
<th>09 月 </th> 
</tr> 
EE 
<td> 收 入 </td> 
<td>8000</td> 
<td>9000</td> 
<td>7500</td> 
HEr> 
<tr> 
<td> 吃 饭 </td> 
<td>600</td> 
<td>570</td> 
<td>650</td> 
ere> 
<tr> 
<td> 购 物 </td> 
<td>1000</td> 
<td>800</td> 
<td>900</td> 
</tr> 
ER 
<td> 买 衣服 </td> 
<td>300</td> 
<td>500</td> 
<td>200</td> 
</tr> 
<tr> 
<td> 看 电影 </td> 
<td>85</td> 
<td>100</td> 
<td>120</td> 
</tr> 
<tr> 
<td> 买 书 </td> 
<td>120</td> 
<td>67</td> 
<td>90</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 13-1 所 示 ， 可 以 看 到 表格 带 有 边框 显示 ， 其 边框 宽 为 1 像素 ， 


到 
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直线 显示 ， 并 且 边 框 进行 合并 。 表 格 标题 “2016 季度 07-09” 也 带 有 边框 显示 ， 字 体 大 小 为 


150 个 像素 ， 字 形 是 幼 圆 并 加 粗 显 示 。 表 格 中 每 个 单元 格 都 以 1 像素 、 直 线 的 方式 显示 边框， 
并 将 显示 对 象 右 对 齐 。 











司 HAUsersAdminist ”CX | 感 永隆 手 度 文 出 表 
文件 (多 名 (E) 本 看 (V) 收 宣 实 人 A) 工具 (帮助 (H) 
2016 季 度 07-09 

月 份 07 月 08 月 09 月 
收入 |8000|9000|7500 

吃 声 | 600| 570| 650 

购物 | 1000，800| 900 
买 衣 股 | 300| 500| 200| 
前 电影 | 85| 100| 120| 

买书 | 120| 67| 90 









































图 13-1 表格 样式 修饰 
13.1.2 ”案例 2 一 一 设置 表格 边框 宽度 


在 CSS 3 中 ， 用 户 可 以 使 用 border-width 属性 来 设置 表格 边框 宽度 ， 从 而 美化 边框 宽度 。 
如 果 需 要 单独 设置 某 一 个 边框 宽度 ， 可 以 使 用 border-width 的 衍生 属性 设置 ， 如 border-top- 
width 和 border-left-width 等 。 


【 例 13.2】( 实 例文 件 ，ch13\13.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 表 格 边框 宽度 </title> 
<style> 
tablel{ 
text-align:center; 
width:500px; 
border-width:6px; 
border-style:double; 
color:blue; 
; 
tdi 
border-width:3px; 
border-style:dashed; 
E 
</style> 
</head> 
<body> 
<table border=1 cellspacing="3" cellpadding="0"> 
Es 
<tq> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
本 
<tr> 
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<td> 张 三 </td> 
<td> 男 </td> 
<td>31</td> 
过 天 ER 
区 EE 
<td> 李 四 </td> 
<td> 男 </td> 
<td>18</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 13-2 所 示 ， 可 以 看 到 表格 带 有 边框 ， 宽 度 为 6 像素 ， 双 线 式 


示 ， 表 格 中 的 字体 颜色 为 蓝 色 。 单 元 格 边框 宽度 为 3 像素 ， 显 示 样式 是 破 折线 式 。 








[es 忻 HWsersAdminist D 。C X | 全 物力 在 度 




















文件 Fi) 编 唱 |E) 喜 看 M) 收藏 夫 人 A) 工具 TT) 。 帮 动 (H) 








图 13-2 设置 表格 宽度 
13.1.3 ”案例 3 一 一 设置 表格 边框 颜色 


表格 颜色 设置 非常 简单 ， 通 常 使 用 CSS 3 属性 color 设置 表格 中 的 文本 颜色 ， 使 用 
background-color 设置 表格 背景 色 。 如 果 为 了 突出 表格 中 的 某 一 个 单元 格 ， 还 可 以 使 用 


background-color 设置 某 一 个 单元 格 颜色 。 
【 例 13.3】( 实 例文 件 : ch13\13.3.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 设 置 表格 边框 颜色 </title> 
<style> 
到 和 
padding:0px; 
margin:0px; 
} 
body{ 
font-family: "黑体 "; 
font-size:20px; 
} 
tablef{ 
background-color:yellow; 
text-align:center; 
width:500px; 
border:lpx solid green; 
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| 
tal{ 
border:lpx solid green; 
height:30px; 
line-height:30px; 
=tast 
background-color:blue; 
</style> 
</head> 
<body> 
<table cellspacing="3" cellpadding="0"> 
<tr> 
<td> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
</tr> 
<tr> 
<td> 张 三 </td> 
<tq> 男 </td> 
<td>32</td> 
</tr> 
去 二 下 大 
<td> 小 丽 </td> 
<td> 女 </td> 
<td>28</td> 
</Er> 
</table> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 13-3 所 示 ， 可 以 看 到 表格 带 有 边框 ， 边 框 样式 显示 为 绿色 ， 表 
格 背景 色 为 黄色 ， 其 中 一 个 单元 格 的 背景 色 为 蓝 色 。 
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文件 从 注 名 全 查看 VM) 收 区 闪 (A) 工具 (T) 可 (| 
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13-3 ”设置 边框 背景 色 


13.2 ”美化 表单 样式 


表单 可 以 用 来 向 Web 服务 器 发 送 数据 ， 特 别 是 经 常 被 用 在 主页 页 面 一 用 户 输入 信息 然 
后 发 送 到 服务 器 中 ， 实 际 用 在 HTML 中 的 标记 有 form、input、textarea、select 和 option。 


二 
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13.2.1 案例 4 一 一 美化 表单 中 的 元 素 


在 网 页 中 ， 表 单元 素 的 背景 色 默 认 都 是 白色 的 ， 这 样 的 背景 色 不 能 美化 网 页 ， 所 以 可 以 
使 用 颜色 属性 定义 表单 元 素 的 背景 色 。 定 义 表单 元 素 背景 色 可 以 使 用 background-color 属性 定 
义 ， 这 样 可 以 使 表单 元 素 不 那么 单调 。 使 用 示例 如 下 。 


input{ 
background-color: #ADD8E6; 


} 


上 面 代码 设置 了 input 表单 元 素 背景 色 ， 都 是 统一 的 颜色 。 
【 例 13.4】( 实 例文 件 ，ch13\13.4.html) 


<!1DOCTYPE html> 

<HTML> 

<head> 

<style> 

5 

input{ /* 所 有 input 标记 */ 


color: #cad9ea; 
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input.txt{ /* 文本 框 单独 设置 */ 
border: lpx inset #cad9ea; 
background-color: #ADD8E6; 

} 

input .btn{ /* 按钮 单独 设置 */ 
color: #00008B; 
background-color: #ADD8E6; 
border: lpx outset #cad9ea; 
padding: lpx 2px lpx 2px; 

} 

select{ 
width: 80px; 
color: #00008B; 
background-color: #ADD8E6; 
border: lpx solid #cad9ea; 

F 

textareaf{ 
width: 200px; 
height: 40px; 
color: #00008B; 
background-color: #ADD8E6; 
border: lpx inset #cad9ea; 

} 

一 -> 

</style> 

</head> 

<BODY> 

<h3> 注 册页 面 </h3> 

<table border="]1" width="45%"> 

<form method="post"> 

<tr><td width="30%"> 昵 称 :</td><td><input class=txt>1 一 20 个 字符 <div id="qq"> 
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</div></td></tr> 

<tr><td> 密 码 :</td><td><input type="password"” > 长 度 为 6 一 16 位 </td></tr> 
<tr><td> 确 认 密码 :</td><td><input type="password" ></td></tr> 
<tr><td> 真 实 姓名 : </td><td><input name="usernamel"></td></tr> 
<tr><td> 性 别 :</td><td><select><option> 男 </option><option> 女 
</option></select></td></tr> 

<tr><td>E-mail 地 址 :</td><td><input value="sohu&sohu.com"></td></tr> 
<tr><td> 备 注 :</td><td><textarea cols=35 rows=10></textarea></td></tr> 
<tr><td><input type="button"” value=" 提 交 " class=btn /></td><td><input 
type="reset" value=" 重 填 "/></td></tr> 

</form> 

</table> 

</BODY> 

</HTML> 


在 下 9.0 中 浏览 效果 如 图 13-4 所 示 ， 可 以 看 到 表单 中 【昵称 】 文本 框 、【 性 别 】 下 拉 列 
表 框 和 【备注 】 文 本 框 中 都 显示 了 指定 的 背景 颜色 。 
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注册 页 面 




















图 13-4 ”美化 表单 元 素 


在 上 面 的 代码 中 ， 首 先 使 用 <input> 标 记 选 择 符 定义 了 input 表单 元 素 的 字体 输入 颜色 ， 然 
后 分 别 定 义 了 两 个 类 txt 和 bm，txt 用 来 修饰 文本 框 样式 ，btn 用 来 修饰 按钮 样式 ， 最 后 分 别 
定义 了 select 和 textarea 的 样式 ， 其 样式 定义 主要 涉及 边框 和 背景 色 。 


13.2.2 ”案例 5 一 一 美化 提交 按钮 


通过 对 表单 元 素 背景 色 的 设置 ， 可 以 在 一 定 程度 上 起 到 美化 提交 按钮 的 效果 ， 例 如 ， 可 
以 使 用 background-color 属性 ， 将 其 值 设 置 为 transparent( 透 明 色 )， 就 是 最 常见 的 一 种 美化 提 
交 按 钮 的 方式 。 使 用 示例 如 下 。 


background-color:transparent; /* 背景 色 透 明 */ 


【 例 13.5】( 实 例文 件 : ch13\13.5.html) 


<1DOCTYPE html> 
<html> 
<head> 


<title> 美 化 提交 按钮 </title> 


<style> 
A 
form{ 
margin:0px; 
padding:0px; 
font-size:14px; 
} 
input{ 
font-size:14px; 
font-family:" 幼 圆 "; 
} 
SEE 
border-bottom:1px solid #005aa7; /* 下 划 线 效果 */ 
Color:#005aa77 
border-top:0px; border-left:0px; 
border-right:0Opx; 
background-color:transparent; /* 背景 色 透 明 */ 


background-color:transparent; /* 背景 色 透明 */ 
border :0px; /* 边框 取消 */ 
| 
--> 
</style> 
</head> 
<body> 
<center> 
<h1> 签 名 页 </h1> 
<form method="post"> 
值班 主任 : <input id="name" class="t"> 
<input type="submit" value=" 提 交 上 一 级 签名 >>" class="n"> 
</form> 
</center> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 13-5 所 示 ， 可 以 看 到 文本 框 只 剩 下 一 个 下 边框 显示 ， 其 他 边框 
被 去 掉 了 ， 提 交 按 钮 只 剩 下 文字 显示 了 ， 而 且 常见 的 矩形 形式 被 去 掉 了 。 
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提交 上 一 级 答 名 > 





13-5 ”表单 元 素 边 框 设置 
13.2.3 ”案例 6 一 一 美化 下 拉 菜 单 
在 网 页 设计 中 ， 有 时 为 了 突出 效果 ， 会 对 文字 进行 加 和 粗 、 添 加 颜色 等 设 定 。 同 样 也 可 以 
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设置 等 。 


<!DOCTYPE html> 
<html> 
<head> 


<style> 
EA 
.bluef{ 





对 表单 元 素 中 的 文字 进行 这 样 的 修饰 。 使 用 CSS 3 的 font 相关 属性 就 可 以 美化 下 拉 菜 单 中 
文字 。 例 如 ，font-size，font-weight 等 ， 对 于 颜色 设置 可 以 采用 color 和 background-color 属性 


【 例 13.6】( 实 例文 件 : ch13\13.6.html) 


<title> 美 化 下 拉 菜 单 </title> 


background-color:#7598FB; 


color: #000000; 


font-size:15px; 
font-weight:bolder; 


font-family:" 幼 圆 "; 


} 
.red{ 





background-color:#E20A0A; 


Colors: TEFFf67 


font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 


} 
.yellow{ 


background-color:#FFFF6F; 


color: #000000; 


font-size:15px; 
font-weight:bolder; 


font-family:" 幼 区 


} 


.orangef{ 





background-color:orange; 


color:#000000; 


font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 


E 

--> 

</style> 
</head> 

<body> 


<form method="post"> 


<p><label for="color"> 选 择 暴雪 预警 信号 级 别 :</label> 

<select name="color" id="color"> 
<option value=""> 请 选择 </option> 
<option value="blue"” class="blue"> 暴 雪 蓝 色 预 警 信号 </option> 
<option value="yellow"” class="yellow"> 暴 雪 黄 色 预 警 信号 </option> 
<option value="orange" class="orange"> 暴 雪 橙 色 预 警 信号 </option> 


</option> 
</select></p> 


<option value="red™ class="red"> 暴 雪 红 色 预 警 信号 





FP 的 


<p><input type="submit"” value=" 提 交 "></p> 
</form> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 13-6 所 示 ， 可 以 看 到 下 拉 菜 单 中 ， 每 个 菜单 项 显示 了 不 同 的 背 
景色 ， 用 以 区 别 其 他 菜单 项 。 
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图 13-6 设置 下 拉 菜 单 样式 


13.3 ”综合 案例 1 一 一 制作 用 户 登录 页 面 


本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 简单 的 登录 表单 ， 具 体操 作 步 又 如 下 。 


创建 一 个 登录 表单 ， 需 要 包含 3 个 表单 元 素 ， 一 个 名 称 文本 框 ， 一 个 密码 文本 框 和 两 个 按 


钮 。 然 后 添加 一 些 CSS 代码 ， 对 表单 元 素 进行 修饰 即 可 。 实 例 完成 后 ， 其 实际 效果 如 图 13-7 
所 示 。 
ETE> 创建 HTML 网 页 ， 实 现 表单 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 用 户 登 录 </title> 

<body> 

<div> 

<h1> 用 户 登录 </h1> 

<form action="" method="post"> 

姓名 : <input type="text" id=name /> 

密码 : <input type="password" id=password name="ps" /> 
<input type=submit value=" 提 交 " class=button> 
<input type=reset value=" 重 置 " class=button> 
</form> 

</div> 

</body> 

</html> 


在 上 面 代码 中 ,创建 了 一 个 div 层 用 来 包含 表单 及 其 元 素 。 在 正 9.0 中 浏览 效果 如 图 13-8 
所 示 ， 可 以 看 到 显示 了 一 个 表单 ， 其 中 包含 两 个 文本 框 和 两 个 按钮 ， 文 本 框 用 来 获取 名 称 和 
密码 ， 按 钮 分 别 为 一 个 提交 按钮 和 一 个 重 置 按 钮 。 

EES》 添加 CSS 代码， 修饰 标题 和 层 。 
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<style> 
hif{ 
font-size:20px; 
} 

div{ 
width:200px; 
padding:lem 2em 0 2em; 
font-size:12px; 

} 

</style> 


上 面 代 码 中 ， 设 置 了 标题 大 小 为 20 像素 ，div 层 宽度 为 200 像素 ， 层 中 字体 大 小 为 12 像 
素 。 在 正 9.0 中 浏览 效果 如 图 13-9 所 示 ， 可 以 看 到 标题 变 小 ， 并 且 密 码 文本 框 换行 显示 ， 布 
局 比 原来 更 加 美观 、 合 理 。 
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图 13-7 登录 表单 图 13-8 创建 登录 表单 
ED 添加 CSS 代码 ， 修 饰 文本 框 和 按钮 。 


#name, #password{ 
border:lpx solid #ccc; 
width:160px; 
height:22px; 
padding-left:20px; 
margin:6px 07 
line-height:20px; 

} 

.button{margin:6px 0;} 


在 下 9.0 中 浏览 效果 如 图 13-10 所 示 ， 可 以 看 到 文本 框 长 度 变 短 、 边 框 变 小 ， 并 且 表 单 
元 素 之 间 的 距离 增 大 ， 页 面 布局 更 加 合理 。 


























图 13-9 设置 层 大 小 图 13-10 CSS 修饰 文本 框 
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13.4 ”综合 案例 2 一 一 制作 用 户 注 册页 面 


本 实例 将 使 用 一 个 表单 内 的 各 种 元 素来 开发 一 个 网 站 的 注册 页 面 ， 并 用 CSS 样式 来 美化 
这 个 页 面 效果 。 具 体操 作 步 又 如 下 。 

TD 分 析 需 求 。 

注册 表单 非常 简单 ， 通 常 包含 3 个 部 分 ， 需 要 在 页 面 上 方 给 出 标题 ， 标 题 下 方 是 正文 部 
分 ， 即 表单 元 素 ， 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注册 ” 
标题 设置 成 hl 大 小 ， 正 文 使 用 <p> 标 记 来 限制 表单 元 素 。 实 例 完成 后 ， 实 际 效果 如 图 13-11 
所 示 。 

E52> 构建 HTML 页 面 ， 实 现 基本 表单 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 注 册页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 注 册 </hl> 

<form method="post" > 

<p> 姓 gnbsp; sgnbsp; gnbsp; &nbsp; 名 : 

<input type="text" class=txt Size="12"” maxlength="20" name="username" 
以 

</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 

<input type="radio" value="male" /> 男 
<input type="radio" value="female" /> 女 
</p><p> 年 gnbsp; &nbsp; &nbsp; &nbsp; 龄 

<input type="text" class=txt name="age" /> 

















</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 
</p> 

<p> 


<input type="submit" name="submit" value=" 提 交 " class=but /> 
<input type="reset" name="reset" value=" 清 除 " class=but /> 
</p> 

</form> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 13-12 所 示 ， 可 以 看 到 创建 了 一 个 注册 表单 ， 包 含 一 个 标题 
“用 户 注册 ”,，【 姓 名 】【 性 别 】【 年 龄 】【 联 系 电话 〗】【 电子 邮件 】【 地 址 】 文 本 框 和 


【提交 】 按 钮 等 ， 其 显示 样式 为 默认 样式 。 


ay 
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图 13-11 注册 页 面 图 13-12 注册 表单 显示 
添加 CSS 代码 ， 修 饰 全 局 样式 和 表单 样式 。 


<style> 





padding:0px; 
margin:0px; 
Bb 3 
\ body{ 
和 N font-family:" 宋 体 "; 
\ font-size:12px; 
} 
form{ 
width:300px; 
margin:0 auto 0 auto; 
font-size:12px; 
color:#999; 
} 
</style> 


在 正 浏览 器 中 浏览 效果 如 图 13-13 所 示 ， 可 以 看 到 页 面 中 的 字体 变 小 ， 其 表单 元 素 之 间 
的 距离 变 小 ， 相 比较 原来 页 面 更 美观 。 
EECZ》 添加 CSS 代码 ， 修 饰 段落 、 文 本 框 和 按钮 。 


form P 1{ 
margin:5px 0 0 Spx; 
text-align:center; 


} 
Extt{ 
width:200px; 
background-color:#CCCCFF; 
border:#6666FF lpx solid; 
Color:#0066FF; 
» 
.butt{ 
border:0px#93bee2solid; 
border-bottom:#93bee21pxsolid; 
border-left:#93bee21lpxsolid; 
border-right:#93bee21lpxsolid; 
border-top:#93bee21pxsolid;*/ 


background-color:#3399CC; 
cursor:hand; 
font-style:normal; 
Color:#cad9ea; 


x 


在 正 浏览 器 中 浏览 效果 如 图 13-14 所 示 ， 可 以 看 到 表单 元 素 带 有 背景 色 ， 其 输入 字体 颜 
色 为 蓝 色 ， 边 框 颜色 为 浅 蓝 色 。 按 钮 带 有 边框 ， 按 钮 上 的 字体 颜色 为 浅 色 。 
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图 13-13 ”CSS 修饰 表单 样式 图 13-14 设置 文本 框 和 按钮 样式 


13.5 高 手 甜 点 


甜点 1: 构建 一 个 表格 需要 注意 哪些 方面 ? 

在 HTML 页 面 中 构建 表格 框架 时 ， 应 该 尽量 遵循 表格 的 标准 标记 ， 养 成 良好 的 编写 习 
惯 ， 并 适当 地 利用 Tab、Space 键 和 空 行 来 提高 代码 的 可 读 性 ， 从 而 降低 后 期 维护 成 本 。 特 别 
是 使 用 table 表格 来 布局 一 个 较 大 的 页 面 时 ， 需 要 在 关键 位 置 加 上 注释 。 

甜点 2: 在 使 用 表格 时 ， 会 发 生 一 些 变形 ， 这 是 什么 原因 引起 的 ? 

其 中 一 个 原因 是 表格 排列 设置 在 不 同 分 辩 率 下 所 出 现 的 错位 。 例 如 ， 在 800x600 分 辨 率 
下 时 ， 一 切 正常 ， 而 到 了 1024x800 分 辩 率 时 ， 则 多 个 表格 有 的 居中 ， 有 的 却 左 排列 或 右 
排列 。 

表格 有 左 、 中 、 右 3 种 排列 方式 ， 如 果 没 特别 进行 设置 ， 则 默认 为 居 左 排列 。 在 
800x600 分 辨 率 下 ， 表 格 恰好 就 有 编辑 区 域 那 么 宽 ， 不 容易 察觉 ， 而 到 了 1024x800 分 辨 率 的 
时 候 ， 就 会 出 现 ， 解 决 的 办 法 比较 简单 ， 即 都 设置 为 居中 排列 方式 ， 或 左 排列 方式 或 右 排 列 
方式 。 

甜点 3: 使 用 CSS 修饰 表单 元 素 时 ， 采 用 默认 值 还 是 使 用 CSS 修饰 值 好 ? 


各 个 浏览 器 之 间 显示 的 差异 ， 其 中 一 个 原因 就 是 各 个 浏览 器 对 部 分 CSS 属性 的 默认 值 不 
同 导致 的 ， 通 常 的 解决 办 法 就 是 指定 该 值 ， 不 让 浏览 器 使 用 默认 值 。 
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13.6 ” 跟 我 练 练 手 


练习 1: 使 用 CSS 3 美化 表格 的 边框 。 

练习 2: 使 用 CSS 3 设置 边框 的 宽度 和 颜色 。 
练习 3: 使 用 CSS 3 美化 表单 中 的 元 素 。 

练习 4: 使 用 CSS 3 美化 提交 按钮 和 下 拉 菜 单 。 
练习 5: 制作 用 户 登 录 页 面 。 

练习 6: 制作 用 户 注册 页 面 。 
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TML 元 


置 和 HTML 元 素 边框 样式 。 


一 张 好 的 图 片 会 给 网 页 带 来 很 高 的 点 击 率 。 在 CSS 3 
3 属性 设置 元 素 边 框 样式 ， 包 括 宽度 、 显 示 风 格 和 颜色 等 。 本 章 


美化 图 片 、 网 页 背景 设 


形象 的 ， 


图 片 是 直观 、 
中 ， 定 义 了 很 多 属性 用 来 美化 和 设置 图 片 。 另 外 ， 不 同类 型 的 网 站 有 不 同 的 背景 和 


基调 。 因 此 页 面 中 的 背景 通常 是 网 站 设计 时 的 一 个 重要 步骤 。 对 于 单个 HH 


素 ， 可 以 通过 CSS 
将 重点 介绍 CSS 


目标 ( 


学 习 


已 掌握 的 在 方 框 中 打 钩 ) 
/A 
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14.1 片 缩放 


网 页 上 显示 一 张 图片 时 ， 默 认 情 况 下 都 是 以 图 片 的 原始 大 小 进行 显示 。 如 果 要 对 网 页 进 
行 排版 ， 通 常情 况 下 ， 还 需要 对 图 片 的 大 小 进行 重新 设 定 。 如 果 对 图 片 设置 不 恰当 ， 则 会 造 
成 图 片 的 变形 和 失真 ， 所 以 一 定 要 保持 宽度 和 高 度 属性 的 比例 适中 。 


14.1.1 案例 1 一 一 使 用 max-width 和 max-height 缩放 图 片 


max-width 和 max-height 分 别 用 来 设置 图 片 的 宽度 最 大 值 和 高 度 最 大 值 。 在 定义 图 片 大 小 
时 ， 如 果 图 片 默认 尺寸 超过 了 定义 的 大 小 ， 那 么 就 以 max-width 所 定义 的 宽度 值 显示 ， 而 图 
片 高 度 将 同比 例 变化 ， 如 果 定 义 的 是 max-height 也 同 理 。 但 是 如 果 图 片 的 尺寸 小 于 最 大 宽度 
或 者 最 大 高 度 时 ， 则 图 片 按 原 尺寸 大 小 显示 。max-width 和 max-height 的 值 一 般 是 数值 类 型 。 
其 语法 格式 如 下 。 


img{ 
max-height:180px; 








} 
【 例 14.1】( 实 例文 件 ，ch14\14.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 缩 放 图 片 </title> 
<style> 
img{ 

max-height:300px; 
} 


</style> 


</head> 
<body> 
<img src="01.jpg" > 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-1 所 示 ， 可 以 看 到 网 页 显示 了 一 张 图 片 ， 其 显示 高 度 是 
300 像素 ， 宽 度 将 做 同比 例 缩放 。 
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图 14-1 同比 例 缩放 图 片 
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在 本 例 中 ， 也 可 以 只 设置 max-width 来 定义 图 片 最 大 宽度 ， 而 让 高 度 自动 缩放 。 


14.1.2 ”案例 2 一 一 使 用 width 和 height 缩放 图 片 


在 CSS 3 中 ， 可 以 使 用 属性 width 和 height 来 设置 图 片 宽度 和 高 度 ， 从 而 达到 对 图 片 的 


缩放 效果 。 
【 例 14.2】( 实 例文 件 : ch14\14.2.html) 


<!DOCTYPE html> 


<html> 

<head> 
<title> 缩 放 图 片 </title> 
</head> 

<body> 


<img src="01.jpg" > 

<img src="01.jpg" style="width:150px;height:100px" > 
</body> 

</html> 


在 下 浏览 器 中 浏览 效果 如 图 14-2 所 示 ， 可 以 看 到 网 页 显示 了 两 张 图 片 ， 第 一 张 图 片 以 
原 大 小 显示 ， 第 二 张 图 片 以 指定 大 小 显示 
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14-2 ”CSS 指定 图 片 大 小 


pr 需要 注意 的 是 ， 当 仅仅 设置 了 图 片 的 width 属性 而 没有 设置 height 属性 时 ， 图 片 
A 本 身 会 纵横 等 比例 自动 缩放 ， 如 果 只 设 定 height 属性 也 是 一 样 的 道理 。 只 有 当 同 时 设 
定 了 width 和 height 属性 时 才 会 不 等 比例 缩放 。 


14.2 ”设置 图 片 的 对 齐 方式 


一 个 凌乱 的 图 文 网 页 ， 是 每 一 个 浏览 者 都 不 喜欢 看 的 。 而 一 个 图 文 并 茂 、 排 版 格式 整洁 
简约 的 页 面 ， 更 容易 让 网 页 浏览 者 接受 。 可 见 图 片 的 对 齐 方式 是 非常 重要 的 。 本 节 将 介绍 使 
CSS 3 属性 定义 图 文 对 齐 方式 。 
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14.2.1 案例 3 一 一 设置 图 片 横向 对 齐 


所 谓 图 片 横向 对 齐 ， 就 是 在 水 平方 向 上 进行 对 齐 ， 其 对 齐 样式 和 文字 对 齐 比较 相似 ， 都 
是 有 3 种 对 齐 方式 ,分 别 为 “ 左 ”、“ 右 ”和 “中 ”。 

如 果 要 定义 图 片 对 齐 方式 ， 不 能 在 样式 表 中 直接 定义 图 片 样式 ， 需 要 在 图 片 的 上 一 个 标 
记 级 别 ， 即 父 标 记 定 义 对 齐 方式 ， 让 图 片 继承 父 标记 的 对 齐 方式 。 之 所 以 这 样 定义 父 标 记 对 
齐 方式 ， 是 因为 img( 图 片 ) 本 身 没有 对 齐 属性 ， 需 要 使 用 CSS 继承 父 标记 的 text-align 来 定义 
对 齐 方式 。 

【 例 14.3】( 实 例文 件 ，ch14\14.3.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 横向 对 齐 </title> 

</head> 

<body> 

<p style="text-align:left"><img src="02.jpg" style="max-width:140px; "> 图 片 左 

对 齐 </p> 

<p style="text-align:center"><img src="02.jpg" style="max-width:140px;"> 图 


片 居中 对 齐 </p> 
<p style="text-align:right"><img src="02.jpg" style="max-width:140px; "> 图 片 


右 对 齐 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-3 所 示 ， 可 以 看 到 网 页 上 显示 了 3 张 图 片 ， 大 小 一 样 ， 
但 对 齐 方式 分 别 是 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 
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. 图 片 左 对 齐 
- 图 片 昌 中 对 齐 
> : 图 片 右 对 齐 


图 14-3 图 片 横向 对 齐 


14.2.2 ”案例 4 一 一 设置 图 片 纵向 对 齐 
纵向 对 齐 就 是 垂直 对 齐 ， 即 在 垂直 方向 上 和 文字 进行 搭配 使 用 。 通 过 对 图 片 的 垂直 方向 














信心 


上 的 设置 ， 可 以 设 定 图 片 和 文字 的 高 度 一 致 。 在 CSS 3 中 ， 对 于 图 片 纵向 设置 ， 通 常 使 用 
vertical-align 属性 来 定义 。 

vertical-align 属性 设置 元 素 的 垂直 对 齐 方式 ， 即 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 
的 基线 的 垂直 对 齐 ， 人 允许 指定 负 长 度 值 和 百分比 值 ， 这 会 使 元 素 降低 而 不 是 升 高 。 在 表单 元 
格 中 ， 这 个 属性 会 设置 单元 格 框 中 单元 格 内 容 的 对 齐 方式 ， 其 语法 格式 如 下 。 


vertical-align : baseline |sub | super |top |text-top |middle |bottom 
Itext-bottom |length 


上 面 参数 含义 如 表 14-1 所 示 。 








表 14-1 参数 含义 表 

















参数 名 称 说 明 
baseline 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 
sub 冬 直 对 齐 文本 的 下 标 
super 冬 直 对 齐 文 本 的 上 标 
to 将 支持 valign 特性 的 对 象 内 容 与 对 象 项 端 对 齐 
text-tol 将 支持 valign 特性 的 对 象 文本 与 对 象 顶端 对 齐 
middle 将 支持 valign 特性 的 对 象 内 容 与 对 象 中 部 对 齐 
bottom 将 支持 valign 特性 的 对 象 文本 与 对 象 底 端 对 齐 
text-bottom 将 支持 valign 特性 的 对 象 文本 与 对 象 项 端 对 齐 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 | 或 者 百分数 。 可 为 负数 。 定 义 由 基线 算 起 的 偏 
移 量 。 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0% 





【 例 14.4】( 实 例文 件 : ch14\14.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 纵 向 对 齐 </title> 

<style> 

img{ 

max-width:100px; 

} 

</style> 

</head> 

<body> 

<p> 纵 向 对 齐 方 式 :baseline<img src=02.jpg style="vertical-align:baseline"></p> 
<p> 纵 向 对 齐 方式 :bottom<img src=02.jpg style="vertical-align:bottom"></p> 
<p> 纵 向 对 齐 方 式 :middle<img src=02.jpg style="vertical-align:middle"></p> 
<p> 纵 向 对 齐 方式 :sub<img src=02.jpg style="vertical-align:sub"></p> 

<p> 纵 向 对 齐 方 式 : super<img src=02.jpg style="vertical-align:super"></p> 
<p> 纵 向 对 齐 方式 :数值 定义 <img src=02.jpg style="vertical-align:20px"></p> 
</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-4 所 示 ， 可 以 看 到 网 页 显示 了 6 张 图 片 ， 垂 直方 向 上 分 
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别 是 baseline、bottom、middle、sub、super 和 数值 定义 。 
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纵向 对 存 方式 : 教 值 定义 





图 14-4 ”图片 纵向 对 齐 


Sn 读者 仔细 观察 图 片 和 文字 的 不 同 对 齐 方式 ， 即 可 深刻 理解 各 种 纵向 对 齐 的 不 同 
之 处 。 


14.3 文 混 排 


一 个 普通 的 网 页 ， 最 常见 的 方式 就 是 图 文 混 排 ， 文 字 说 明 主 题 ， 图 像 显示 文字 情境 ， 二 
者 结合 起 来 相得益彰 。 本 节 将 介绍 图 片 和 文字 的 排版 方式 。 


14.3.1 案例 5 一 一 设置 文字 环绕 效果 


在 网 页 中 进行 排版 时 ， 可 以 将 文字 设置 成 环绕 图 片 的 形式 ， 即 文字 环绕 。 文 字 环绕 应 用 
非常 广泛 ， 如 果 再 配合 背景 可 以 产生 绚丽 的 效果 。 

在 CSS 3 中 ， 可 以 使 用 float 属性 定义 该 效果 。float 属性 主要 定义 元 素 在 哪个 方向 浮动 。 
一 般 情况 下 这 个 属性 总 应 用 于 图 像 ， 使 文本 围绕 在 图 像 周 围 ， 有 时 也 可 以 定义 其 他 元 素 浮 
动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 其 本 身 是 何 种 元 素 。 如 果 浮 动 非 蔡 换 元 素 ， 则 要 指 
定 一 个 明确 的 宽度 。 
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float 语法 格式 如 下 。 


float : none | left |right 


Bn 其 中 none 表示 默认 值 对 象 不 漂浮 ，left 表示 文本 流向 对 象 的 右边 ，right 表示 文本 
半 ”流向 对 象 的 左边 。 
【 例 14.5】( 实 例文 件 ，ch14\14.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 环 绕 </title> 

<style> 

img{ 

max-width:120px; 

float:left; 

} 

</style> 

</head> 

<body> 

<p> 

可 爱 的 向 日 次 。 

<img src="03.jpg"> 

向 日 鞭 ， 别 名 太阳 花 ， 是 菊 科 向 日 葵 属 的 植物 。 因 花序 随 太阳 转动 而 得 名 。 一 年 生 植物 ， 高 1~3 米 ， 
茎 直立 ， 粗 壮 ， 圆 形 多 棱角 ， 被 白色 粗 硬 毛 ， 性 喜 温暖 ， 耐 旱 ， 能 产 果 实 葵花 籽 。 原 产 北美 洲 ， 主 要 分 
布 在 我 国 东北 、 西 北 和 华北 地 区 ， 世 界 各 地 均 有 栽培 ! 

向 日 次 ，1 年 生 草本 ， 高 1.0 一 3.5 米 ， 对 于 杂交 品种 也 有 半 米 高 的 。 茎 直立 ， 粗 壮 ， 圆 形 多 棱角 ， 为 
白色 粗 硬 毛 。 叶 通常 互生 ， 心 状 卵 形 或 卵 圆 形 ， 先 端 锐 突 或 渐 兴 ， 有 基 出 3 脉 ， 边 缘 具 粗 锯齿 ， 两 面 粗 
糙 ， 被 毛 ， 有 长 柄 。 头 状 花序 ， 极 大 ， 直 径 10~30 厘米 ， 单 生 于 茎 项 或 枝 端 ， 常 下 倾 。 总 苞 片 多 层 ， 
叶 质 ， 获 瓦 状 排 列 ， 被 长 硬 毛 ， 夏 季 开花 ， 花 序 边缘 生 黄色 的 舌 状 花 ， 不 结实 。 花 序 中 部 为 两 性 的 管状 
花 ， 棕 色 或 紫色 ， 结 实 。 瘦 果 ， 倒 卵 形 或 卵 状 长 圆 形 ， 稍 扁 压 ， 果 皮 木 质 化 ， 灰 色 或 黑色 ， 俗 称 葵花 
闻 。 人 性 喜 温暖 ， 耐 旱 。 

</p> 

</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-5 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 在 文字 的 左 方 
向 显示 。 如 果 将 float 属性 的 值 设置 为 right， 其 图 片 会 在 文字 右 方 显 示 并 环绕 。 
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14-5 ”文字 环绕 效果 
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14.3.2 ”案例 6 一 一 设置 图 片 与 文字 的 间距 


如 果 需 要 设置 图 片 和 文字 之 间 的 距离 ， 即 文字 之 间 存 在 一 定 间距 ， 不 是 紧 紧 地 环绕 ， 可 
以 使 用 CSS 3 中 的 属性 padding 来 设置 。 

padding 属性 主要 用 来 在 一 个 声明 中 设置 所 有 内 边 距 属性 ， 即 可 以 设置 元 素 所 有 内 边 距 的 
宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 
会 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 内 容重 倒 。 元 素 的 背景 会 延伸 穿 过 内 边 距 。 不 允许 指定 
负 边 距 值 ， 其 语法 格式 如 下 。 


padding :padding-top | padding-right | padding-bottom | padding-left 


参数 值 padding-top 用 来 设置 距离 顶部 内 边 距 ，padding-right 用 来 设置 距离 右 部 内 边 距 ; 
padding-bottom 用 来 设置 距离 底部 内 边 距 ，padding-left 用 来 设置 距离 左 部 内 边 距 。 
【 例 14.6】( 实 例文 件 ，ch14\14.6.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 文 字 环绕 </title> 
<style> 

img{ 
max-width:120px; 
float:left; 
padding-top:10px; 
padding-right:50px; 
padding-bottom:10px; 
} 

</style> 

</head> 

<body> 








<p> 

可 爱 的 向 日 葵 。 

<img src="03.jpg"> 

向 日 苯 ， 别 名 太阳 花 ， 是 菊 科 向 日 葵 属 的 植物 。 因 花序 随 太阳 转动 而 得 名 。 一 年 生 植物 ， 高 1~3 米 ， 
茎 直立 ， 粗 壮 ， 圆 形 多 棱角 ， 被 白色 粗 硬 毛 ， 性 喜 温暖 ， 耐 旱 ， 能 产 果 实 葵花 好。 原 产 北美 洲 ， 主 要 分 
布 在 我 国 东 北 、 西 北 和 华北 地 区 ， 世 界 各 地 均 有 栽培 ! 

向 日 葵 ，1 年 生 草本 ， 高 1.0 一 3.5 米 ， 对 于 杂交 品种 也 有 半 米 高 的 。 芭 直立， 粗壮 ， 圆 形 多 棱角 ， 为 
白色 粗 硬 毛 。 叶 通常 互生 ， 心 状 卵 形 或 卵 圆 形 ， 先 端 锐 突 或 渐 兴 ， 有 基 出 3 脉 ， 边 缘 具 粗 锯齿 ， 两 面 粗 
糙 ， 被 毛 ， 有 长 柄 。 头 状 花 序 ， 极 大 ， 直 径 10~30 厘米 ， 单 生 于 茎 项 或 枝 端 ， 常 下 倾 。 总 苞 片 多 层 ， 
叶 质 ， 覆 瓦 状 排列 ， 被 长 硬 毛 ， 夏 季 开 花 ， 花 序 边缘 生 黄色 的 舌 状 花 ， 不 结实 。 花 序 中 部 为 两 性 的 管状 
花 ， 棕 色 或 紫色 ， 结 实 。 瘦 果 ， 倒 久 形 或 卵 状 长 圆 形 ， 稍 扁 压 ， 果 皮 木 质 化 ， 灰 色 或 黑色 ， 俗 称 葵花 
籽 。 性 喜 温 暖 ， 耐 旱 。 

</p> 

</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-6 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 且 文 字 和 图 片 
右边 间距 为 50 像素 ， 上 下 各 为 10 像素 。 
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向 日 葵 。 向 日 葵 ， 别 名 太阳 花 ， 是 菊 和 向日葵 属 的 
植物 。 因 花序 随 太阳 转 动 而 得 名 。 一 年 生 植 物 ， 高 二 es 
莹 直立 ， 粗 壮 ， 加 形 多 棱角 ， 被 白色 外 硬 毛 ， 性 喜 温 : 
耐 旱 ， 能 产 果 实 委 花 籽 。 原 产 北美 洲 ， 和 
北 、 斩 北 和 华北 地 区 ， 世 界 各 地 均 有 新 培 : 也 
3 六 10 宁 ， 央 作息 站 闪 半 且 吉 ”六 汪 
， 粗 壮 ， i “+ I 和 心 
这 订 ， 直径 10*a0 人 人 
被 长 硬 毛 ， 花 ， 花 序 边 绿 生 黄 双 的 天 状 伦 ， 不 结 
和 ， 结实 - 疫 果 ， 倒 卵 形 或 卵 状 长 图 形 , 
舌 遍 压 ， 果 友 林 质 化 ， 灰色 或 时 色 ， 谷 称 概论 椰 。 性 喜 温 磺 ， 而 早 。 









































图 14-6 设置 图 片 和 文字 边 距 


14.4 使 用 CSS 3 美化 背景 


背景 是 网 页 设计 时 的 重要 因素 之 一 ， 一 个 背景 优美 的 网 页 ， 总 能 吸引 不 少 访问 者 。 例 
如 ， 喜 庆 类 网 站 都 是 以 火红 背景 为 主题 。CSS 的 强大 表现 功能 在 背景 方面 同样 发 挥 得 淋 沉 
尽 致 。 


14.4.1 案例 7 一 一 设置 背景 颜色 


background-color 属性 用 于 设 定 网 页 背景 色 ， 同 设置 前 景色 的 color 属性 一 样 ， 
background-color 属性 接受 任何 有 效 的 颜色 值 ， 而 对 于 没有 设 定 背景 色 的 标记 ， 默 认 背 景色 为 
透明 (transparent)， 其 语法 格式 如 下 。 


{background-color : transparent | color} 


关键 字 transparent 是 个 默认 值 ， 表 示 透 明 。 背 景 颜色 color 设 定 方法 可 以 采用 英文 单词 、 
十 六 进 制 、RGB、HSL、HSLA 和 GRBA。 
【 例 14.7】( 实 例文 件 : ch14\14.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景色 设置 </title> 

<head> 

<body style="background-color:PaleGreen; color:Blue"> 
<p> 

background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 。 

</p> 

</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-7 所 示 ， 网 页 背景 色 显示 浅 绿色 ， 而 字体 颜色 为 蓝 色 。 
注意 ， 在 网 页 设计 时 ， 其 背景 色 不 要 使 用 太 艳 的 颜色 ， 否 则 会 给 入 一 种 喧 宾 夺 主 的 感觉 。 
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backsround-color 属 性 设置 背景 色 ，color 忆 性 设置 守 体 额 色 。 








图 14-7 设置 背景 色 
14.4.2 ”案例 8 一 一 设置 背景 图 片 


NN 网 页 中 不 但 可 以 使 用 背景 色 来 填充 网 页 背景 ， 同 样 也 可 以 使 用 背景 图 片 来 填充 网 页 。 通 





过 CSS 3 属性 可 以 对 背景 图 片 进行 精确 定位 。background-image 属性 用 于 设 定 标记 的 背景 图 
片 ， 通 常情 况 下 ， 在 标记 <body> 中 应 用 ， 将 图 片 用 于 整个 主体 中 。 
background-image 语法 格式 如 下 。 


background-image : none | url (url) 


其 默认 属性 是 无 背景 图 ， 当 需要 使 用 背景 图 时 可 以 用 URL 进行 导入 ，URL 可 以 使 用 绝对 
路 径 ， 也 可 以 使 用 相对 路 径 。 
【 例 14.8】( 实 例文 件 ，ch14\14.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景色 设置 </title> 
<style> 
body{ 
background-image:url (04.jpg) 
} 
</style> 
<head> 
<body > 
<p> 夕 阳 无 限 好 ， 只 是 近 黄 昏 ! </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-8 所 示 ， 可 以 看 到 网 页 中 显示 的 背景 图 ， 但 如 果 图 片 大 
小 小 于 整个 网 页 大 小 时 ， 图 片 为 了 填充 网 页 背景 色 ， 会 重复 出 现 并 铺 满 整个 网 页 。 
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14-8 设置 背景 图 片 
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在 设 定 背景 图 片 时 ， 最 好 同时 设 定 背景 色 ， 这 样 当 背景 图 片 因 某 种 原因 无 法 正常 显示 
时 ， 可 以 使 用 背景 色 来 代 蔡 。 当 然 ， 如 果 正 常 显示 ， 背 景 图 片 会 覆盖 背景 色 。 




















14.5 ”使 用 CSS 3 美化 边框 


边框 就 是 将 元 素 内 容 及 间隙 包含 在 其 中 的 边线 ， 类 似 于 表格 的 外 边线 。 每 一 个 页 面 元 素 
的 边框 可 以 从 3 个 方面 来 描述 : 宽度 、 样 式 和 颜色 ， 这 3 个 方面 决定 了 边框 所 显示 出 来 的 外 
观 。CSS 3 中 分 别 使 用 border-style、border-width 和 border-color 这 3 个 属性 设 定 边框 的 3 个 
方面 。 


14.5.1 案例 9 一 一 设置 边框 样式 
border-style 属性 用 于 设 定 边框 的 样式 ， 也 就 是 风格 。 设 定 边框 格式 是 边框 最 重要 的 部 
分 ， 主 要 用 于 为 页 面 元 素 添 加 边框 ， 其 语法 格式 如 下 。 


border-style : none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset 


CSS 3 设 定 了 9 种 边框 样式 ， 如 表 14-2 所 示 。 
表 14-2 ”边框 样式 








属性 值 描述 
none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 
dashed 破 折线 式 边框 
solid 直线 式 边框 
double 双 线 式 边框 
groove 槽 线 式 边框 
Tidge 桨 线 式 边框 
inset 内 赚 效 果 的 边框 
outset 突起 效果 的 边框 


【 例 14.9】( 实 例文 件 : ch14\14.9.html) 


<1DOCTYPE html> 

<html> 

<head> 

<title> 边 框 样式 </title> 

<style> 

1 
border-style:dotted; 
color: black; 
tezxt-align:center; 
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Pi 
border-style:double; 
text-indent:2em; 
} 
</style> 
<head> 
<body > 
<h1> 带 有 边框 的 标题 </h1> 
<p> 带 有 边框 的 段落 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-9 所 示 ， 可 以 看 到 网 页 中 ， 标 题 hl 显示 的 时 候 带 有 边 





框 ， 其 边框 样式 为 点 线 式 边框 ， 同 样 ， 段 落 也 带 有 边框 ， 其 边框 样式 为 双 线 式 边框 。 
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图 14-9 设置 边框 


Se 在 没有 设 定 边框 颜色 的 情况 下 ，groove、ridge、inset 和 outset 边框 默认 的 颜色 是 
外 灰色 。dotted、dashed、solid 和 double 这 4 种 边框 的 颜色 基于 页 面 元 素 的 color 值 。 


14.5.2 ”案例 10 一 一 设置 边框 颜色 


border-color 属性 用 于 设 定 边框 颜色 ， 如 果 不 想 与 页 面 元 素 的 颜色 相同 ， 则 可 以 使 用 该 属 
性 为 边框 定义 其 他 颜色 。border-color 属性 语法 格式 如 下 。 


border-color : color 


color 表示 指定 颜色 ， 其 颜色 值 通过 十 六 进 制 和 RGB 等 方式 获取 。 同 边框 样式 属性 一 
border-color 属性 可 以 为 边框 设 定 一 种 颜色 ， 也 可 以 同时 设 定 4 个 边 的 颜色 。 
【 例 14.10】( 实 例文 件 : ch14\14.10.html) 


<1DOCTYPE html> 

<html> 

<head> 
<title> 设 置 边框 颜色 </title> 
<style> 

Pi 


样 


border-style:double; 
border-color:red; 
text—-indent:2em; 

} 

</style> 

<head> 
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<body > 
<p> 边 框 颜色 设置 </p> 
<p style="border-style:solid; border-color:red blue yellow green"> 
分 别 定义 边框 颜色 
</p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-10 所 示 ， 网 页 中 ， 第 一 个 段落 边框 颜色 设置 为 红色 ， 第 
二 个 段落 边框 颜色 分 别 设置 为 红 、 蓝 、 黄 和 绿色 。 
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图 14-10 设置 边框 颜色 
14.5.3 ”案例 11 一 一 设置 边框 线 宽 
在 CSS 3 中 ， 可 以 通过 设 定 边框 宽带 来 增强 边框 效果 。border-width 属性 就 用 来 设 定 边 框 
宽度 ， 其 语法 格式 如 下 。 
border-width : medium | thin | thick | length 


其 中 预 设 有 3 种 属性 值 : medium、thin 和 thick， 另 外 还 可 以 自行 设置 宽度 (width)， 如 
表 14-3 所 示 。 


表 14-3 ”border-width 属性 





属性 值 描述 
medium 默认 值 ， 中 等 宽度 
thin 比 medium 细 
thick 比 medium 粗 
length 自 定义 宽度 





【 例 14.11】( 实 例文 件 : ch14\14.11.html) 


<!1DOCTYPE html> 

<html> 

<head> 

<title> 设 置 边框 宽度 </title> 

<head> 

<body > 
<p style="border-style:dotted; border-width:medium; "> 边框 颜色 设置 </p> 
<p style="border-style:dashed;border-width:thin; "> 边框 颜色 设置 </p> 
<p style="border-style:solid; border-width:12px;"> 

分 别 定义 边框 颜色 
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</p> 

</body> 

</html> 

在 正 浏览 器 中 浏览 效果 如 图 14-11 所 示 ， 可 以 看 到 网 页 中 有 3 个 段落 边框 ， 以 不 同 的 粗 
细 显 示 。 





和 [se 
0 user dminist P - c x | E a x | 
文件 (月 久久 (E) 得 看 (V) 收藏 交 (A) “工具 (大 如 (HT) 














图 14-11 设置 边框 宽带 


border-width 属性 其 实 是 border-top-width、 border-right-width 、 border-bottom-width 和 
border-left-width 这 4 个 属性 的 综合 属性 ， 分 别 用 于 设 定 上 边框 、 右 边框 、 下 边框 、 左 边框 的 
宽度 。 


14.6 ”设置 边框 圆 角 效果 


在 CSS 3 标准 没有 指定 之 前 ， 如 果 想 要 实现 圆 角 效果 ， 需 要 花费 很 大 的 精力 ， 但 在 CSS 
3 标准 推出 之 后 ， 网 页 设计 者 可 以 使 用 border-radius 轻松 实现 圆 角 效果 。 


14.6.1 案例 12 一 一 设置 圆 角 边框 


在 CSS 3 中 ， 可 以 使 用 border-radius 属性 定义 边框 的 圆 角 效 果 ， 从 而 大 大 降低 圆 角 的 开 
发 成 本 。border-radius 的 语法 格式 如 下 。 


border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 


其 中 ，none 为 默认 值 ， 表 示 元 素 没 有 圆 角 。<length> 表 示 由 浮 点 数字 和 单位 标识 符 组 成 
的 长 度 值 ， 不 可 为 负 值 。 
【 例 14.12】( 实 例文 件 ，ch14\14.12.html) 


<1DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边框 设置 </title> 

<styLe> 

Pi 
text=-aliqn:ecenters 
border:15px solid red; 
width:100px; 
height:50px; 
border-radius:10px; 
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} 
</style> 
<head> 
<body > 
<p> 这 是 一 个 圆 角 边框 </p> 
</body> 
</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-12 所 示 ， 可 以 看 到 网 页 中 的 段落 边框 显示 时 ， 以 圆 角 显 
示 ， 其 半径 为 10 像素 。 
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图 14-12 定义 圆 角 边框 
14.6.2 ”案例 13 一 一 绘制 4 个 不 同 圆 角 边框 


在 CSS 3 中 ， 实 现 4 个 不 同 圆 角 边框 ， 其 方法 有 两 种 : 一 种 是 使 用 border-radius 属性 ， 
另 一 种 是 使 用 border-radius 衍生 属性 。 


1. border-radius 属性 


利用 border-radius 属性 可 以 绘制 4 个 不 同 圆 角 的 边框 ， 如 果 直 接 给 border-radius 属性 赋 4 
个 值 ， 这 4 个 值 将 按照 top-left、top-right、bottom-right、bottom-left 的 顺序 来 设置 。 如 果 
bottom-left 值 省 略 ， 其 圆 角 效果 和 top-right 效果 相同 ;如果 bottom-right 值 省 略 ， 其 圆 角 效果 
和 top-left 效果 相同 ; 如果 top-right 的 值 省 略 ， 其 圆 角 效果 和 top-left 效果 相同 。 如 果 为 
border-radius 属性 设置 4 个 值 的 集合 参数 ， 则 每 个 值 表示 每 个 角 的 圆 角 半径 。 

【 例 14.13】( 实 例文 件 ， ch14\14.13.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 圆 角 边 框 </title> 

<style> 

.divif{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 30px S50px 70px; 

} 

.div2{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 50px 70px; 

} 

-div31{ 
border:15px solid blue; 
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height:100px; 
border-radius:10px S50px; 
} 
</style> 
<head> 
<body > 
<div class=divl></div><br> 
<div class=div2></div><br> 
<div class=div3></div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 14-13 所 示 ， 可 以 看 到 网 页 中 ， 第 1 个 div 层 设置 了 4 个 不 同 的 
圆 角 边框 ， 第 2 个 div 层 设置 了 3 个 不 同 的 圆 角 边框 ， 第 3 个 div 层 设 置 了 2 个 不 同 的 圆 角 边框 。 
已 于 画 | 
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图 14-13 设置 4 个 圆 角 边框 
2. border-radius 衍生 属性 


除了 上 面 设置 圆 角 边框 的 方法 之 外 ， 还 可 以 使 用 如 表 14-4 所 示 列 出 的 属性 ， 单 独 为 相应 
的 边框 设置 圆 角 。 


表 14-4 定义 不 同 圆 角 











-right-radius 


定义 右 下 角 圆 角 


border-bottom-right-radius 









border-bottom-left-radius 








【 例 14.14】( 实 例文 件 : ch14\14.14.html) 


<1DOCTYPE html> 

<html> 

<head> 
<title> 圆 角 边框 设置 </title> 


<style> 


-div{ 
border:15px solid blue; 
height:100px; 
border-top-left-radius:70px; 
border-bottom-right-radius:40px; 

</style> 

<head> 

<body > 

<div class=div></div><br> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 14-14 所 示 ， 可 以 看 到 网 页 中 ， 设 置 了 两 个 圆 角 边框 ， 分 别 使 
用 border-top-left-radius 和 border-bottom-right-radius 属性 指定 。 
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图 14-14 ”绘制 指定 圆 角 边框 


14.7 ”综合 案例 1 一 一 制作 图 文 混 排 网 页 


在 一 个 网 页 中 ， 出 现 最 多 的 就 是 文字 和 图 片 ， 二 者 放 在 一 起 ， 图 文 并 茂 ， 能 够 生动 地 表 
达 文字 主题 。 本 实例 创建 一 个 图 片 与 文字 的 简单 混 排 。 具 体 步 骤 如 下 。 

本 综合 实例 的 要 求 如 下 ， 要 求 在 网 页 的 最 上 方 显示 出 标题 ， 标 题 下 方 是 正文 ， 在 正文 显 
示 部 分 显示 图 片 。 在 设计 网 页 标题 时 ， 其 方法 同 前 面 的 实例 相同 。 上 述 要 求 使 用 CSS 样式 属 
性 实现 。 实 例 效果 图 如 图 14-15 所 示 。 
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14-15 ”图 文 混 排 显示 
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ECESDD 分 析 布局 并 构建 HTML。 

首先 需要 创建 一 个 HTML 页 面 ， 并 用 DIV 将 页 面 划分 两 个 层 ， 一 个 是 网 页 标题 层 ， 一 个 
是 正文 部 分 。 

导入 CSS 文件 。 

在 HTML 页面， 将 CSS 文件 使 用 link 方式 ， 导 入 到 HTML 页 面 中 。 此 CSS 页 面 ， 定 义 
了 这 个 页 面 的 所 有 样式 ， 其 导入 代码 如 下 。 


<link href="CSS.css" rel="stylesheet" type="text/css" /> 


完成 标题 部 分 。 
首先 设置 网 页 标题 部 分 ， 创 建 一 个 div 层 ， 用 来 放置 标题 。HTML 代码 如 下 。 


<div> 


<h1>【3.8 节 活动 】《 妈 咪 妈 咪 看 过 来 一 说 说 孕期 那些 事 儿 》 
</h1> 
</div> 


在 CSS 样式 文件 中 ， 修 饰 HTML 元 素 ， 其 CSS 代码 如 下 。 


hl{text-align:center;text-shadow:0.lem 2px 6px blue;font-size:18px;} 





EBY 完成 正文 和 图 片 部 分 。 
下 面 设置 网 页 正文 部 分 ， 正 文中 包含 了 一 个 图 片 。HTML 代码 如 下 。 
<div> 
<P> 活 动 主题 : 《 妈 咪 妈 咪 看 过 来 一 一 说 说 孕期 那些 事 儿 》。 
</p> 
<p> 活动 时 间 : 2015 年 2 月 28 日 一 -2016 年 3 月 9 日 10 点 
</p> 


<DIV class="im"> 

<img src="8.jpg" width="300" height="200"/> 

</DIV> 

<p>3 月 到 来 ， 万 物 复苏 ， 终 于 可 以 脱 掉 寒 冬 时 厚 厚 的 棉衣 ， 沐 浴 在 春风 和 阳光 之 下 ， 迎 来 了 3 月 
第 一 个 活动 。 怀 孕 对 于 每 一 个 女性 来 说 ， 都 是 人 生 经 历 中 的 最 重要 的 一 段 旅 程 ， 随 着 孕期 的 进 
行 ， 你 会 遇 到 很 多 未 曾 遇 见 的 怀孕 体验 ， 而 ， 这 些 体验 正在 等 待 被 你 发 现 和 分 享 ! 这 ， 就 是 本 次 
的 活动 主题 ， 妈 妈 和 准 妈妈 们 还 在 等 什么 ，come on 快 来 e 站 分 享 出 这 段 旅程 ~ 让 帖子 记录 下 那 
一 撮 幸 福 的 记忆 . -..- 

</p> 

</div> 


CSS 样式 代码 如 下 。 


p{text-indent:8mm;line-height:7mm;} 
.im{width:300px; float:left; border:#000000 solid lpx;} 


14.8 ”综合 案例 2 一 一 制作 公司 主页 
打开 各 种 类 型 的 商业 网 站 ， 最 先 映 入 眼帘 的 就 是 首页 ， 也 称 为 主页 。 作 为 一 个 网 站 的 门 


户 ， 主 页 一 般 要 求 版 面 整洁 ， 美 观 大 方 。 结 合 前 面 学 习 的 背景 和 边框 知识 ， 本 实例 创建 一 个 
简单 的 商业 网 站 。 具 体 步 又 如 下 。 
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TDD 分 析 需 求 。 

在 本 实例 中 ， 主 页 包括 三 个 部 分 ， 一 部 分 是 网 站 LOGO， 一 部 分 是 导航 栏 ， 最 后 一 部 分 
是 主页 显示 内 容 。 网 站 LOGO 此 处 使 用 了 一 个 背景 图 来 代 蔡 ， 导 航 栏 使 用 表格 实现 ， 内 容 列 
表 使 用 无 序列 表 实 现 。 实 例 完成 后 ， 效 果 如 图 14-16 所 示 。 

ET 构建 基本 HIML。 

为 了 划分 不 同 的 区 域 ，HTML 页 面 需 要 包含 不 同 的 div 层 ， 每 一 层 代 表 一 个 内 容 。 一 个 
div 层 包 含 背景 图 ， 一 个 div 层 包 含 导航 栏 ， 一 个 div 层 包含 整体 内 容 ， 内 容 又 可 以 划分 为 两 
个 不 同 的 层 。 代 码 如 下 。 


<!1DOCTYPE html> 

<html> 

<head> 

<title> 公 司 主页 </title> 

</head> 

<body> 

<center> 

<div> 

<div class="divl" align=center></div> 
<div class=div2> 

<table width=99%><tr align=center><td> 首 页 </td><td> 最 新 消息 </td><td> 产 品 展 
示 </td><td> 销 售 网 络 </td><td> 人 才 招 聘 </td><td> 客 户 服务 </td></tr></table> 
</div> 

<div class=div3> 

<div class=div4> 

<ul> 最 新 消息 

<1i> 公 司 举 办 2014 科技 辩论 大 赛 </1i> 
<1i> 企 业 安全 知识 大 比武 </1i> 

<1i> 优 秀 员工 评比 活动 规则 </1i> 

<1i> 人 才 招 聘 信息 </1i> 

</ul> 

</div> 

<div class=div5> 

<ul> 成 功 案例 

<1i> 上 海 装修 建材 公司 </1i> 

<1i> 美 衣服 饰 有 限 公 司 </1i> 

<1i> 天 力 科技 有 限 公司 </1i> 

<1i> 美 方 豆 制 品 有 限 公司 </1i> 

</ul> 

</div> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 正 浏览 器 中 浏览 效果 如 图 14-17 所 示 ， 可 以 看 到 在 网 页 中 显示 了 导航 栏 和 两 个 列表 信息 。 
添加 CSS 代码 ， 设 置 背 景 LOGO。 


<style> 
-divi{ 
height:100px; 
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width:820px; 

background-image:url (03.jpg); 

background-repeat:no-repeat; 
background-position:center; 
background-size:cover; 


} 
</style> 
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图 14-16 ”商业 网 站 主页 14-17 基本 HTML 结构 


在 正 浏览 器 中 浏览 效果 如 图 14-18 所 示 ， 可 以 看 到 在 网 页 顶部 显示 了 一 个 背景 图 ， 此 背 
景 覆 盖 整 个 div 层 ， 并 不 重复 ， 并 且 背景 图 片 居中 显示 。 
GEC 添加 CSS 代码 ， 设 置 导航 栏 。 


.div2{ 
width:820px; 
background-color:#d2e7ff; 


人 





tablef{ 
font-size:12px; 
font-family:" 幼 圆 "; 
于 


在 下 浏览 器 中 浏览 效果 如 图 14-19 所 示 ， 在 网 页 中 导航 栏 背景 色 为 浅 蓝 色 ， 表 格 中 字体 
大 小 为 12 像素 ， 字 体 类 型 是 幼 圆 。 











二 说 公司 
闫 豆 后 有 限 公司 





14-18 ”设置 背景 图 14-19 ”设置 导航 栏 
ECRD) 添加 CSS 代码 ， 设 置 内 容 样式 。 


-div3{ 
width:820px; 
height:320px; 
border-style:solid; 
border-color:#ffeedd; 
border-width:10px; 
border-radius:60px; 
} 
-div4f{ 
width:810px; 
height:150px; 
text-align:left; 
border-bottom-width: 2px; 
border-bottom-style:dotted; 
border-bottom-color:#ffeedd; 
} 
.div5{ 
width:810px; 
height:150px; 
text-align:left; 
} 


在 正 浏览 器 中 浏览 效果 如 图 14-20 所 示 ， 可 以 看 到 在 网 页 中 的 内 容 显示 在 一 个 贺 角 边框 


中 ， 两 个 不 同 的 内 容 块 中 间 使 用 虚线 隔 开 。 
GET 添加 Css 代码， 设置 列表 样式 。 


EL 





font-size:15px; 
font-family: "楷体 "; 
3 


在 正 浏览 器 中 浏览 效果 如 图 14-21 所 示 ， 可 以 看 到 在 网 页 中 列表 字体 大 小 为 15 像素 ， 
字形 为 楷体 。 





tr 





图 14-20 CSS 修饰 边框 14-21 ”美化 列表 信息 
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14.9 高 手 甜 点 


甜点 1: 网 页 进行 图 文 排版 时 ， 哪 些 是 必须 要 做 的 ? 


在 进行 图 文 排版 时 ， 通 常 有 下 面 5 个 方面 ， 需 要 网 页 设计 者 考虑 。 

e@ 首 行 缩 进 : 段落 的 开头 应 该 空 两 格 ，HTML 中 Space 键 起 不 了 作用 。 当 然 ， 可 以 用 
nbsp:; 来 代替 一 个 空格 ， 但 这 不 是 理想 的 方式 ， 可 以 用 CSS 3 中 的 首 行 缩 进 ， 其 大 小 
为 2em。 

@ 图 文 混 排 : 在 CSS 3 中 ， 可 以 用 float 让 文字 显示 在 图 片 以 外 的 空白 处 。 

@ 设置 背景 色 : 设置 网 页 背景 ， 增 加 效果 。 此 内 容 会 在 后 面 介绍 。 

@ ”文字 居中 : 可 以 使 用 CSS 的 text-align 属性 设置 文字 居中 。 

@ ”显示 边框 :通过 border 为 图 片 添加 一 个 边框 。 

甜点 2: 边框 样式 border:0 会 占用 资源 吗 ? 

推荐 的 写法 是 bordernone， 虽 然 border:0 只 是 定义 边框 宽度 为 0， 但 边框 样式 、 颜 色 还 是 

会 被 浏览 器 解析 ， 占 用 资源 。 





14.10” 跟 我 练 练 手 


练习 1: 制作 一 个 包含 背景 图 片 的 网 页 ， 然 后 设置 背景 的 显示 大 小 、 显 示 区 域 等 属性 。 
练习 2: 制作 一 个 包含 边框 的 网 页 ， 然 后 设置 边框 的 样式 、 颜 色 、 线 宽 等 属性 。 

练习 3: 制作 一 个 包含 圆 角 边 框 的 网 页 ， 然 后 设置 圆 角 边框 的 半径 和 种 类 等 属性 。 
练习 4: 制作 一 个 简单 公司 主页 的 例子 。 

练习 5: 制作 一 个 生活 咨询 主页 的 例子 。 
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第 3 篇 
jQuery Mobile 移动 技术 


第 15 章 JavaScript 和 jQuery 

第 16 章 HTML 5、CSS 3 和 JavaScript 的 综合 应 用 
第 17 章 熟悉 jQuery Mobile 

第 18 章 jQuery Mobile UI 组 件 

第 19 章 jQuery Mobile 事件 

第 20 章 ”数据 存储 和 读 取 技 术 





JavaScript 作为 一 种 可 以 给 网 页 增加 交互 性 的 脚本 语言 ， 拥 有 近 二 十 年 的 发 展 
历史 。 它 的 简单 、 易 学 易 用 特性 ， 使 其 立 于 不 败 之 地 。jQuery 是 JavaScript 的 函 
数 库 ， 简 化 了 HTML 与 JavaScript 之 间 复 杂 的 处 理 程序 ， 同 时 解决 了 跨 浏览 器 的 
问题 。 


学 习 目 标 (已 掌握 的 在 方 框 中 打 钩 ) 















































2 人 [的 基本 概念 2 2 
所 TML 5 添加 Script - > 
ONES ; 
握 事 件 的 使 用 方法 
e 本 概念 
sn NS > 
六 2 
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SN 
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15.1 认识 JavaScript 


JavaScript 是 一 种 客户 端的 脚本 程序 语言 ， 用 于 HTML 网 页 制作 ， 主 要 作用 是 为 HTML 
网 页 增加 动态 效果 。 下 面 将 开始 学 习 JavaScript 的 基本 知识 。 


15.1.1 什么 是 JavaScript 


JavaScript 最 初 由 网 景 公司 的 Brendan Eich 设计 ， 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语 

， 内 置 支持 类 。 经 过 近 二 十 年 的 发 展 ， 已 经 成 为 健壮 的 基于 对 象 和 事件 驱动 并 具有 相对 安 

全 性 的 客户 端 脚本 语言 。 同 时 也 是 一 种 广泛 用 于 客户 端 Web 开发 的 脚本 语言 ， 常 用 来 给 

HTML 网 页 添加 动态 功能 ， 如 响应 用 户 的 各 种 操作 。 

JavaScript 可 以 弥补 HTML 语言 的 缺陷 ， 实 现 Web 页 面 客户 端 动态 效果 ， 其 主要 作用 如 下 。 

@ ”动态 改变 网 页 内 容 。HTML 语言 是 静态 的 ， 一 旦 编写 ， 内 容 是 无 法 改变 的 。 
JavaScript 可 以 弥补 这 种 不 足 ， 可 以 将 内 容 动 态 地 显示 在 网 页 中 。 

@ ”动态 改变 网 页 的 外 观 。JavaScript 通过 修改 网 页 元 素 的 CSS 样式 ， 达 到 动态 地 改变 网 
页 的 外 观 。 例 如 ， 修 改 文本 的 颜色 、 大 小 等 属性 ， 图 片 的 位 置 动 态 改变 等 。 

ee 验证 表单 数据 。 为 了 提高 网 页 的 效率 ， 用 户 在 填写 表单 时 ， 可 以 在 客户 端 对 数据 进 
行 合 法 性 验证 ， 验 证 成 功 之 后 才能 提交 到 服务 器 上 ， 从 而 减少 服务 器 的 负担 和 网 络 
带宽 的 压力 。 

@ ”响应 事件 。JavaScript 是 基于 事件 的 语言 ， 因 此 可 以 影响 用 户 或 浏览 器 产生 的 事件 。 
只 有 事件 产生 时 才 会 执行 某 段 JavaScript 代码 ， 如 当 用 户 单 击 计算 按钮 时 ， 程 序 才 显 
示 运 行 结果 。 








HN 





pr 几乎 所 有 浏览 器 都 支持 JavaScript， 如 Internet Explorer(IE)、Firefox、Netscape、 
外。 ”Mozilla 和 Opera 等 。 


15.1.2 ”案例 1 一 一 在 HTML 网 页 头 中 赃 入 JavaScript 代码 


JavaScript 脚本 一 般 放 在 HTML 网 页 头 部 的 <head> 与 </head> 标 签 对 之 间 。 这 样 ， 不 会 因 
为 JavaScript 影响 整个 网 页 的 显示 结果 。 

在 HTML 网 页 头 部 的 <head> 与 </head> 标 答对 之 间 柑 入 JavaScript 的 格式 如 下 : 

<html> 

<head> 

<title> 在 HTML 网 页 头 中 嵌入 Javascript 代码 <title> 


<script language="Javascript " > 
cs 





Javascript 脚本 内 容 
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</acript> 
</head> 
<body> 


</body> 
</html> 


在 <script> 与 </script> 标 签 中 添加 相应 的 JavaScript 脚本 ， 这 样 就 可 以 直接 在 HTML 文件 
中 调用 JavaScript 代码 ， 实 现 相应 的 效果 。 
【 例 15.1】 在 HTML 网 页 头 中 嵌入 JavaScript 代码 (实例 文件 ，ch15\15.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<script language = "javascript"> 
document .write ("欢迎 来 到 javascript 动态 世界 ") ; 
</script> 
</head> 
<body> 
<p> 学 习 javascript! ! ! 
</body> 
</html> 


该 实例 功能 是 在 HTML 文档 里 输出 一 个 字 国 
符 串 ， 即 “欢迎 来 到 JavaScript 动态 世界 ”; 在 le 半 HAUeereAdminict D - OX ee 




















KienD[ 这 YdJoSeAEF 翰 91 泪 图 
py HH !'") 


IE 浏览 器 中 浏览 效果 如 图 15-1 所 示 ， 可 以 看 到 EY ER RDM 


欢迎 来 到 javascript 动 态 世界 





网 页 输出 了 两 句 话 ， 其 中 第 一 句 就 是 JavaScript 
中 的 输出 语句 。 


学 javascript! ! ! 











pr 在 JavaScript 的 语法 中 ， 分 号 
“;” 是 JavaScript 程序 作为 一 个 语句 
结束 的 标识 符 。 图 15-1 嵌入 JavaScript 代码 


15.2 ” JavaScript 对 象 与 函数 
下 面 介绍 JavaScript 对 象 与 函数 的 使 用 方法 。 


15.2.1 认识 对 象 


在 JavaScript 中 ， 对 象 包括 内 置 对 象 、 自 定义 对 象 等 多 种 类 型 ， 使 用 这 些 对 象 可 大 大 简化 
JavaScript 程序 的 设计 ， 并 提供 直观 、 模 块 化 的 方式 进行 脚本 程序 开发 。 

对 象 (object) 是 一 件 事 、 一 个 实体 、 一 个 名 词 ， 可 以 获得 的 东西 ， 可 以 想象 有 自己 的 标识 
的 任何 东西 。 

凡是 能 够 提取 一 定 度量 数据 ， 并 能 通过 某 种 方式 对 度量 数据 实施 操作 的 客观 存在 ， 都 可 
以 构成 一 个 对 象 。 同 时 可 以 用 属性 来 描述 对 象 的 状态 、 使 用 方法 和 事件 来 处 理 对 象 的 各 种 
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属性 : 用 来 描述 对 象 的 状态 ， 通 过 定义 属性 值 来 定义 对 象 的 状态 。 

方法 : 针对 对 象 行为 的 复杂 性 ， 对 象 的 某 些 行为 可 以 以 通用 的 代码 来 处 理 ， 这 些 代 
码 就 是 方法 。 

事件 : 由 于 对 象 行为 的 复杂 性 ， 对 象 的 某 些 行为 不 能 使 用 通用 的 代码 来 处 理 ， 需 要 
用 户 根据 实际 情况 来 编写 处 理 该 行为 的 代码 ， 该 代码 称 为 事件 。 











JavaScript 中 常见 的 内 部 对 象 如 表 15-1 所 示 。 


表 15-1 JavaScript 常见 的 内 部 对 象 











对 象 名 功 能 静态 动态 性 
Object 对 象 使 用 该 对 象 可 以 在 程序 运行 时 为 JavaScript 对 象 随意 添加 属性 动态 对 象 
String 对 象 用 于 处 理 或 格式 化 文本 字符 串 以 及 确定 和 定位 字符 串 中 的 子 字符 串 动态 对 象 
Date 对 象 使 用 Date 对 象 执行 各 种 日 期 和 时 间 的 操作 动态 对 象 
Event 对 象 用 来 表示 JavaScript 的 事件 静态 对 象 
FileSystemObject 对 象 | 主要 用 于 实现 文件 操作 功能 动态 对 象 
Drive 对 象 主要 用 于 收集 系统 中 的 物理 或 逻辑 驱动 器 资源 中 的 内 容 动态 对 象 
File 对 象 用 于 获取 服务 器 端 指定 文件 的 相关 属性 静态 对 象 
Folder 对 象 用 于 获取 服务 器 端 指定 文件 的 相关 属性 静态 对 象 

15.2.2 案例 2 一 一 认识 函数 
所 谓 函 数 是 指 在 程序 设计 中 ， 可 以 将 一 段 经 常 使 用 的 代码 “封装 ”起 来 ， 在 需要 时 直接 


调用 ， 这 
使 用 


种 “封装 ” 叫 函 数 。JavaScript 中 可 以 使 用 函数 来 响应 网 页 中 的 事件 。 
函数 前 ， 必 须 先 定义 函数 ， 定 义 函 数 使 用 关键 字 function。 定 义 函数 的 语法 格式 如 下 。 


function 函数 名 ([ 参 数 1, 参 数 2..] ) { 
// 函 数 体 语句 
[return 表达 式 ] 


} 
上 述 


编写 

户 通过 提 
【 例 

具体 
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代码 的 含义 如 下 。 

function 为 关键 字 ， 在 此 用 来 定义 函数 。 

函数 名 必须 是 唯一 的 ， 要 通俗 易 懂 ， 最 好 能 看 名 知 意 。 

[] 括 起 来 的 是 可 选 部 分 ， 可 有 可 无 。 

可 以 使 用 retum 将 值 返 回 。 

参数 是 可 选 的 ， 可 以 一 个 参数 不 带 ， 也 可 以 带 多 个 参数 ， 多 个 参数 之 间 用 逗号 隔 
开 。 即 使 不 带 参数 也 要 在 方法 名 后 加 一 对 圆 括号 。 

函数 calcFO0， 实 现 输入 一 个 值 ， 计 算 其 一 元 二 次 方程 式 f(x)=4x2+3x+2 的 结果 ， 用 
示 对 话 框 输入 x 的 值 ， 单 击 【 计 算 】 按 钮 ， 在 对 话 框 中 显示 相应 的 计算 结果 。 

15.2】 计 算 一 元 二 次 方程 式 (实例 文件 : ch15\15.2.html) 

操作 步 又 如 下 。 


创建 HTML 文档 ， 结 构 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 计 算 一 元 二 次 方程 函数 </title> 
</head> 

<body> 

<input type="button" value=" 计 算 "> 
</body> 

</html> 


在 HTML 文档 的 head 部 分 ， 增 加 如 下 JavaScript 代码 。 


<script type="text/javascript"> 

function calcF (x){ 
Var result; // 声 明 变量 ， 存 储 计算 结果 
result=4*x*x+3*Xx+27 // 计 算 一 元 二 次 方程 值 
alert ("计算 结果 : "+result)， // 输 出 运算 结果 

} 

</script> 

为 【计算 】 按 钮 添加 单 击 (onclicl) 事 件 ， 调 用 计算 (caleF0) 函 数 。 将 HTML 文件 
中 ，<input type="button" value=" 计 ” 算 "> 这 一 行 代码 修改 成 如 下 代码 。 


<input type="button" value=" 计 算 " onclick="calcF (prompt (' 请 输入 一 个 数值 :') ) "> 


本 例 主要 用 到 了 参数 ， 增 加 了 参数 之 后 ， 就 可 以 计算 任意 数 的 一 元 二 次 方程 值 ， 试 想 ， 
如 果 没 有 该 参数 ， 函 数 的 功能 将 会 非常 单一 。Prompt0 方 法 是 系统 内 置 的 一 个 调用 输入 对 话 框 
的 方法 ， 该 方法 可 以 带 参 数 ， 也 可 以 不 带 参 数 。 

国运 行 代码 即 可 显示 如 图 15-2 所 示 页 面 效果 。 





mm ~ ox] 
文件 月 。 壮 坦 (5) 去 要 (V) 。 收 宇 突 (A) 工具 (T) 厅 峻 (H) 








图 15-2 ”加 载 网 页 效果 


EEIDp 单 击 【计算 】 按钮 ， 弹 出 一 个 信息 提示 框 ， 在 其 中 输入 一 个 数值 ， 如 图 15-3 所 示 。 
EB> 单 击 【 确 定 】 按 钮 ， 即 可 得 出 计算 结果 ， 如 图 15-4 所 示 。 








图 15-3 输入 数值 图 15-4 显示 计算 结果 


D2 
289 人 S 





售 2 


APP 和 移动 网 站 开发 
一 一 全 案例 课堂 @ 一 





15.3 JavaScript 事件 


JavaScript 是 基于 对 象 (Objectbased) 的 语言 ， 它 的 一 个 最 基本 的 特征 就 是 采用 事件 驱动 ， 
可 以 使 在 图 形 界面 环境 下 的 一 切 操作 变 得 简单 化 。 通 常 鼠标 或 热 键 的 动作 称 为 事件 ， 由 鼠标 
或 热 键 引发 的 一 连 串 程序 动作 ， 称 之 为 事件 驱动 ， 而 对 事件 进行 处 理 的 程序 或 函数 ， 称 之 为 
事件 处 理 程序 。 


15.3.1 事件 与 事件 处 理 概述 


事件 由 浏览 器 动作 如 浏览 器 载 入 文档 或 用 户 动作 如 敲 击 键盘 、 深 动 鼠 标 等 触发 ， 而 事件 
处 理 程序 则 说 明 一 个 对 象 如 何 响应 事件 。 在 早期 支持 JavaScript 脚本 的 浏览 器 中 ， 事 件 处 理 程 
序 是 作为 HIML 标记 的 附加 属性 加 以 定义 的 ， 其 形式 如 下 。 


<input type="button" name="MyButton" value="Test Event" onclick="MyEvent()"> 


大 部 分 事件 的 命名 都 是 描述 性 的 ， 如 click、submit、mouseover 等 ， 通 过 其 名 称 就 可 以 知 
道 其 含义 。 但 是 也 有 少数 事件 的 名 字 不 易 理 解 ， 如 blur 在 英文 中 的 含义 是 模糊 的 ， 而 在 这 里 
表示 的 是 一 个 域 或 者 一 个 表单 失去 焦点 。 一 般 情况 下 ， 在 事件 名 称 之 间 添 加 前 级 ， 如 对 于 
click 事件 ， 其 处 理 器 名 为 onclick。 

事件 不 仅仅 局 限于 鼠标 和 键盘 操作 ， 也 包括 浏览 器 状态 的 改变 ， 如 绝 大 部 分 浏览 器 支持 
类 似 resize 和 load 这 样 的 事件 等 。load 事件 在 浏览 器 载 入 文档 时 被 甬 发 ， 如 果 某 事件 要 在 文 
档 载 入 时 被 触发 ， 一 般 应 该 在 <body> 标 记 中 加 入 语句 onload="MyFunction0"; 而 resize 事件 
在 用 户 改 变 浏览 器 窗口 的 大 小 时 触发 ， 当 用 户 改变 窗口 大 小 时 ， 有 时 需要 改变 文档 页 面 的 内 
容 布 局 ， 从 而 使 其 以 恰当 、 友 好 的 方式 显示 给 用 户 。 

现代 事件 模型 中 引入 了 Event 对 象 ， 包 含 其 他 对 象 使 用 的 常量 和 方法 的 集合 。 当 事件 发 
生 后 ， 产 生 临 时 的 Event 对 象 实例 ， 而 且 还 附带 当前 事件 的 信息 ， 如 鼠标 定位 、 事 件 类 型 
等 ， 然 后 将 其 传递 给 相关 的 事件 处 理 器 进行 处 理 。 待 事件 处 理 完 毕 后 ， 该 临时 Event 对 象 实 
例 所 占据 的 内 存 空间 被 释放 ， 浏 览 器 等 待 其 他 事件 的 出 现 并 进行 处 理 。 如 果 短 时 间 内 发 生 的 
事件 较 多 ， 浏 览 器 按 事 件 发 生 的 顺序 将 这 些 事件 排序 ， 然 后 按照 排 好 的 顺序 依次 执行 这 些 
事件 。 

事件 可 以 发 生 在 很 多 场合 ， 包 括 浏览 器 本 身 的 状态 和 页 面 中 的 按钮 、 链 接 、 图 片 、 层 
等 。 同 时 根据 DOM 模型 ， 文 本 也 可 以 作为 对 象 ， 并 响应 相关 的 动作 ， 如 单 击 鼠标 、 文 本 被 
选择 等 。 事 件 的 处 理 方法 甚至 于 结果 同 浏 览 器 的 环境 都 有 很 大 的 关系 ， 浏 览 器 的 版 本 越 新 ， 
所 支持 的 事件 处 理 器 就 越 多 ， 支 持 也 就 越 完 善 。 所 以 在 编写 JavaScript 脚本 时 ， 要 充分 考虑 浏 
览 器 的 兼容 性 ， 才 可 以 编写 出 适合 多 数 浏览 器 的 安全 脚本 。 


15.3.2 ”案例 3 一 一 JavaScript 的 常用 事件 
JavaScript 的 常用 事件 如 表 15-2 所 示 。 
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例如 ， 下 面 以 鼠标 的 onclick 事件 为 例 进行 讲解 。 
【 例 15.3】 通 过 按钮 变换 背景 颜色 (实例 文件 : ch15\15.3.htmD) 


<!DOCTYPE html > 


第 
表 15-2 常用 事件 加 
导 } 
事件 说 明 oe 
i 按 下 鼠标 时 触发 此 事件 3; 
onclick 单 击 鼠 标 时 触发 此 事件 Ei 
onmouseover 鼠标 指针 移 到 目标 的 上 方 触发 此 事件 和 
a 鼠标 指针 移出 目标 的 上 方 触发 此 事件 5 
本 网 页 载 入 时 触发 此 事件 < 
onunload 离开 网 页 时 触发 此 事件 
onfocus 网 页 上 的 元 素 获得 焦点 时 产生 该 事件 
onmove 浏览 器 的 窗口 被 移动 时 触发 的 事件 
onresize 当 浏 览 器 的 窗口 大 小 被 改变 时 触发 的 事件 NN 
onscroll 浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 
onsubmit 提交 表单 时 产生 该 事件 N 


<html> 

<head> 
<title> 通 过 按钮 变换 背景 颜 </title> 
</head> 

<body> 


<script language="javascript"> 
Var Arraycolor=new 
Array ("olive" eal", "red", "blue", "maroon", "navy", "lime","fuschia","green", 
"purple", "gray", "yellow", "aqua", "white","silver"); 
var n=0; 
function turncolors(){ 
if (n==(Arraycolor.length-1)) n=0; 
Tr 
document .bgColor = Arraycolor[n]; 






} 
</script> 
<form name="forml" method="post" action=""> 
<p> 
<input type="button" name="Submit" value=" 变 换 背 景 " 
onclick="turncolors()"> 


</p> 
<p> 用 按钮 随意 变换 背景 颜色 .</p> 
</form> 
</body> 
</html> 





运行 上 述 代 码 ， 预 览 效果 如 图 15-5 所 示 ， 单 击 【 变 换 背 景 】 按 钮 ， 就 可 以 动态 地 改变 页 面 
的 背景 颜色 ， 当 用 户 再 次 单 击 该 按钮 时 ， 页 面 背景 将 以 不 同 的 颜色 进行 显示 ， 如 图 15-6 所 示 。 
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图 15-5 ”预览 效果 15-6 ”改变 背景 颜色 


15.4 认识 jQuery 


jQuery 是 一 套 开放 原始 代码 的 JavaScript 函数 库 ， 它 的 核心 理念 是 写 得 更 少 ， 做 得 更 多 。 
目前 ，jQuery 已 经 成 为 最 流行 的 JavaScript 函数 库 。 本 节 将 重点 学 习 jQuery 的 基本 知识 。 


15.4.1 jQuery 能 做 什么 


最 开始 时 ，jQuery 所 提供 的 功能 非常 有 限 ， 仅 能 增强 CSS 的 选择 器 功能 ， 而 现在 jQuery 
已 经 发 展 到 集 JavaScript、CSS、DOM 和 AJAX 于 一 体 的 优秀 框架 ， 其 模块 化 的 使 用 方式 使 
开发 者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 目 前 ， 很 多 网 站 的 动态 效果 就 是 利 
用 jQuery 脚本 库 制作 出 来 的 ， 如 中 国 网 络 电视 台 、CCTV、 京 东 商 城 等 。 
下 面 介绍 京东 商城 应 用 的 jQuery 效果 ， 访 问 京东 商城 的 首页 时 ， 在 右 侧 有 一 个 话费 、 旅 
行 、 彩 票 、 游 戏 栏目 ， 这 里 应 用 jQuery 实现 了 标签 页 的 效果 ， 将 鼠标 指针 移动 到 【话费 】 栏 
上 ， 标 签 页 中 将 显示 手机 话费 充值 的 相关 内 容 ， 如 图 15-7 所 示 ; 将 鼠标 指针 移动 到 【游戏 】 
栏 上 ， 标 签 页 中 将 显示 游戏 充值 的 相关 内 容 ， 如 图 15-8 所 示 。 
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图 15-7 话费 栏目 图 15-8 游戏 栏目 


15.4.2 ”案例 4 一 一 jQuery 的 配置 
要 想 在 开发 网 站 的 过 程 中 应 用 jQuery 库 ， 就 需要 配置 它 。jQuery 是 一 个 开源 的 脚本 库 ， 
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可 以 从 其 官方 网 站 (httpWiquery com) 中 下 载 。 将 jQuery 库 下 载 到 本 地 计算 机 后 ， 还 需要 在 项 
目 中 配置 jQuery 库 ， 即 将 下 载 的 后 缀 名 为 js 文件 放置 到 项 目的 指定 文件 夹 中 ， 通 常 放置 
在 JavaScript 文件 夹 中 ， 然 后 在 需要 应 用 到 jQuery 的 页 面 中 使 用 下 面 的 语句 ， 将 其 引用 到 文 
件 中 。 

<script src="jquery.min.js"type="text/javascript" ></script> 

或 者 


<script Language="javascript" src="jquery.min.js"></script> 


3 引用 jQuery 的 <script> 标 签 ， 必 须 放 在 所 有 自 定义 脚本 的 <script> 之 前 ， 否 则 在 自 
崩 闯 。 定义 的 本 代码 中 应 用 不 到 jQuery 让 本 库 . 


15.5 ”jQuery 选择 器 


在 JavaScript 中 ， 要 想 获 取 元 素 的 DOM 元 素 ， 必 须 使 用 该 元 素 的 ID 和 TagName， 但 是 
在 jQuery 库 中 却 提 供 了 许多 功能 强大 的 选择 器 帮助 开发 人 员 获 取 页 面 上 的 DOM 元 素 ， 而 且 
获取 到 的 每 个 对 象 都 以 jQuery 包装 集 的 形式 返回 。 


15.5.1 案例 5 一 一 jQuery 的 工厂 函数 


$ 是 jQuery 中 最 常用 的 一 个 符号 ， 用 于 声明 jQuery 对 象 。 可 以 说 ， 在 jQuery 中 ， 无 论 使 
用 哪 种 类 型 的 选择 器 都 需要 从 一 个 “$” 符 号 和 一 对 “0” 开 始 。 在 “0” 中 通常 使 用 字符 串 
参数 ， 参 数 中 可 以 包含 任何 CSS 选择 符 表达 式 ， 其 通用 语法 格式 如 下 。 


$(selector) 


$ 的 常用 用 法 有 以 下 几 种 。 

@ 在 参数 中 使 用 标记 名 ， 如 $("div")， 用 于 获取 文档 中 全 部 的 <div>。 

@ 在 参数 中 使 用 ID， 如 $("#usename")， 用 于 获取 文档 中 ID 属性 值 为 usename 的 一 个 
元 素 。 

@ ”在 参数 中 使 用 CSS 类 名 ， 如 $(".btn_grey")， 用 于 获取 文档 中 使 用 CSS 类 名 为 
btn_grey 的 所 有 元 素 。 

【 例 15.4】 选 择 文本 段落 中 的 奇数 行 (实例 文件 ，ch15\15.4.html) 


<!IDOCTYPE html > 
<html> 
<head> 
<title>$ 符 号 的 应 用 </title> 
<script language="javascript" src="jquery-1.11.0.min.js"></script> 
<script language="javascript"> 
window.onload = function(){ 

Var oElements = $("p:0dd"); // 选 择 匹配 元 素 

forl(var i=0;i<oElements.length;i++) 

oElements[il].innerHTML = i.tostring(); 
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} 

</script> 
</head> 
<body> 

<div id="body"> 
<p> 第 一 行 </p> 
<p> 第 二 行 </p> 
<p> 第 三 行 </p> 
<p> 第 四 行 </p> 
<p> 第 五 行 </p> 
</div> 
</body> 
</html> 


运行 结果 如 图 15-9 所 示 。 
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图 15-9 “$” 符 号 的 应 用 


15.5.2 ”案例 6 一 一 常见 选择 器 


在 jQuery 中 ， 常 见 的 选择 器 如 下 。 
1. 基本 选择 器 


jQuery 的 基本 选择 器 是 应 用 最 广泛 的 选择 器 ， 是 其 他 类 型 选择 器 的 基础 ， 是 jQuery 选择 
器 中 最 为 重要 的 部 分 。jQuery 的 基本 选择 器 包括 ID 选择 器 、 元 素 选择 器 、 类 别 选择 器 、 复 合 
选择 器 等 。 


2. 层级 选择 器 


层级 选择 器 是 根据 DOM 元 素 之 间 的 层次 关系 来 获取 特定 的 元 素 ， 如 后 代 元 素 、 子 元 
素 、 相 邻 元 素 和 兄弟 元 素 等 。 


3. 过 滤 选 择 器 


jQuery 过 滤 选 择 器 主要 包括 简单 过 滤器 、 内 容 过 滤器 、 可 见 性 过 滤器 、 表 单 对 象 的 属性 
选择 器 和 子 元 素 选择 器 等 。 


4. 属性 选择 器 
属性 选择 器 是 通过 元 素 的 属性 作为 过 滤 条 件 来 进行 筛选 对 象 的 选择 器 ， 常 见 的 属性 选择 


2 


器 主要 有 [attribute]、[attribute=value]、[attribute!=value] 和 [attribute$=value] 等 。 

5. 表单 选择 器 

表单 选择 器 用 于 选取 经 常 在 表单 内 出 现 的 元 素 ， 不 过 ， 选 取 的 元 素 并 不 一 定 在 表单 之 中 ， 
jQuery 提供 的 表单 选择 器 主要 包括 :input 选择 器 、:text 选择 器 、:password 选择 器 、:password 
选择 器 、:radio 选择 器 、:checkbox 选择 器 、:submit 选择 器 、:reset 选择 器 、:button 选择 
器 、:image 选择 器 和 :file 选择 器 。 

下 面 以 表单 选择 器 为 例 进行 讲解 使 用 选择 器 的 方法 。 

【 例 15.5】 类 型 为 file 的 所 有 <input> 元 素 添加 背景 色 (实例 文件 :ch15\15.5.html) 


<!DOCTYPE html > 
<html> 
<head> 
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
$(" :file") .css("background-color", "#B2EOFF"); 
1D); 
</script> 
</head> 
<body> 
<form action=""> 
姓名 : <input type="text" name=" 姓 名 "” /> 
=r > 
密码 : <input type="password”name=" 密 码 " /> 
<br /> 
<button type="button"> 按 钮 1</button> 
<input type="button" value=" 按 钮 2" /> 
<br /> 
<input type="reset" value=" 重 置 " /> 
<input type="submit" value=" 提 交 " /> 
<br /> 
文件 域 : <input type="file"> 
</form> 
</body> 
</html> 


运行 结果 如 图 15-10 所 示 ， 可 以 看 到 网 页 中 表单 类 型 为 file 的 元 素 被 添加 上 背景 色 。 
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图 15-10 表单 选择 器 的 应 用 


. 
295 C3 


APP 和 移动 网 站 开发 
一 一 一 案例 课堂 四 一 


15.6 高 手 甜 点 


甜点 1: JavaScript 支持 的 对 象 主要 包括 哪些 ? 


JavaScript 支持 的 对 象 主要 包括 如 下 几 个 。 

@ JavaScript 核心 对 象 : 包括 同 基本 数据 类 型 相关 的 对 象 (如 String、Boolean、 
Number)、 人 允许 创建 用 户 自 定义 和 组 合 类 型 的 对 象 ( 如 Object、Array) 和 其 他 能 简化 
JavaScript 操作 的 对 象 ( 如 Math、Date、RegExp、Function)。 

@ 浏览 器 对 象 : 包括 不 属于 JavaScript 语言 本 身 但 被 绝 大 多 数 浏览 器 所 支持 的 对 象 ， 如 
控制 浏览 器 窗口 和 用 户 交 互 界面 的 Window 对 象 、 提 供 客 户 端 浏览 器 配置 信息 的 
Navigator 对 象 。 

@ ”用 户 自 定义 对 象 + Web 应 用 程序 开发 者 用 于 完成 特定 任务 而 创建 的 自 定义 对 象 ， 可 
自由 设计 对 象 的 属性 、 方 法 和 事件 处 理 程序 ， 编 程 灵活 性 较 大 。 

@ 文本 对 象 : 由 文本 域 构 成 的 对 象 ， 在 DOM 中 定义 ， 同 时 赋予 很 多 特定 的 处 理 方 
法 ， 如 insertData0、appendData0 等 。 


甜点 2: 如 何 检查 浏览 器 的 版 本 ? 
使 用 JavaScript 代码 可 以 轻松 地 实现 检查 浏览 器 版 本 的 目的 ， 具 体 代码 如 下 : 


<script type="text/javascript"> 
Var browser=navigator.appName 
Var b version=navigator.appVersion 
Var version=parseFloat (b_ version) 
document .write (" 浏 览 器 名 称 : "+ browser) 
document .write ("<br />") 
document .write ("浏览 器 版 本 : "+ version) 
</script> 








15.7” 跟 我 练 练 手 


练习 1: 制作 一 个 包含 弹出 欢迎 对 话 框 的 网 页 。 
练习 2: 制作 一 个 包含 函数 的 网 页 。 

练习 3: 制作 一 个 使 用 事件 的 网 页 。 

练习 4: 制作 一 个 引用 jQuery 函数 库 的 网 页 。 
练习 5: 制作 一 个 包含 jQuery 选择 器 的 网 页 。 


全 2 








设计 

















实现 的 动态 效果 非常 有 限 ， 在 网 页 


ript 结合 可 以 创建 出 具有 动态 效果 的 页 面 。 
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16.1 综合 案例 1 一 一 打字 效果 的 文字 


文字 是 网 页 的 灵魂 ， 没有 文字 的 网 页 ， 不 管 特效 多 么 绚丽 多 彩 必定 没有 任何 实际 意义 。 
文字 特效 始终 是 网 页 设计 追求 的 目标 ， 通 过 JavaScript 可 以 实现 多 个 网 页 特效 。 文 字 的 打字 效 
果 是 JavaScript 脚本 程序 ， 将 预先 设置 好 的 文字 逐一 在 页 面 上 显示 出 来 ， 具 体 步骤 如 下 。 
ED 分 析 需 求 。 
如 果 要 在 网 页 实现 打字 效果 ， 需 要 创建 一 个 预先 设置 好 的 文字 ， 作 为 输出 信息 。 该 实例 
完成 效果 如 图 16-1 所 示 。 
EC 创建 HTML 页 面 ， 设 置 页 面 基本 样式 。 
<!DOCTYPE html> 
<html> 
<head> 
<title> 打 字 效 果 的 文字 </title> 
<style type="text/css"> 
body{font-size:14px;font-weight:bold;} 
</style> 
</head> 
<body> 
松 风水 月 最 新 微 博 信息 : <a id="HotNews" href="" target=" blank"></a> 
</body> 
</html> 
上 面 代码 中 ， 在 <head> 标 记 中 间 ， 设 置 body 页 面 的 基本 样式 ， 如 字体 大 小 为 14 像素 ， 
字形 加 粗 ， 并 在 body 页 面 创建 了 一 个 超 链接 。 
浏览 效果 如 图 16-2 所 示 ， 可 以 看 到 页 面 中 只 显示 了 一 个 提示 信息 。 
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16-1 打字 效果 图 16-2 页 面 基本 样式 
添加 JavaScript 代码 ， 实 现 打 字 特 效 。 


<SCRIPT LANGUAGE="Javascript"> 

<1== 

2000;  // 每 条 微 博 的 停留 时 间 

50; 。 // 微 博文 字 出 现 等 待 时 间 ， 越 小 越 快 


Var NewsTime 
Var TextTime 
Var newsi = 0; 

Var txti = 0; 

var txttimer; 

Var newstimer; 

var newstitle = new Array(); // 微 博 标 题 
Var newshref = new Array(); // 微 博 链接 
newstitle[0] = "健康 是 身体 的 本 钱 "; 
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newshref[0] = "#"; 
newstitle[1] = "关心 身体 ， 就 是 关心 自己 "; 
newshref[1] = "#"; 
newstitle[2] = "去 西藏 旅游 了 "; 
newshref[2] = "#"; 
newstitle[3] = "大 雨 倾盆 ， 很 大 呀 "; 
newshref[3] = "#"; 
function shownew() 
{ 
Var endstr = "" 
hwnewstr = newstitle[newsil]; 
newslink = newshref [newsi]; 
IE (txti==(hwnewstr.length-1)) {endstr="";} 
if (txti>=hwnewstr.length){ 
clearIinterval (txttimer); 
clearInterval (newstimer); 
newsit+t+; 
if (newsi>=newstitle.length){ 
newsi = 0 
} 
newstimer = setInterval ("shownew()",NewsTime); 
txti = 0; 
return; 
} 
clearIinterval (txttimer); 
document .getElementById ("HotNews") .href=newslink; 
document .getElementById ("HotNews") .innerHTML = 
hwnewstr.substring(0,txti+l1)+endstr; 
EE 
txttimer = setInterval ("shownew()",TextTime); 
| 
shownew(); 
We 
</SCRIPT> 


因为 上 面 代 码 是 一 个 整体 ， 这 里 就 不 分 开 介 绍 了 。 上 面 的 JavaScript 代码 中 ， 主 要 调用 
shownew0) 函 数 完成 打字 效果 。 在 JavaScript 代码 开始 部 分 ， 定 义 了 多 个 变量 ， 其 中 数组 对 象 
newstitle 用 于 存放 文本 标题 。 然 后 创建 了 shownew0O 函 数 ， 并 在 函数 中 通过 变量 和 条 件 获 取 要 
显示 的 文字 ， 通 过 setInterval("shownew0",NewsTime) 语 句 输出 文字 内 容 。 代 码 最 后 使 用 
shownew0) 语 句 循 环 执行 该 函数 中 的 输出 信息 。 

浏览 效果 如 图 16-3 所 示 ， 页 面 中 每 隔 一 定时 间 ， 会 在 提示 信息 后 逐个 打出 单个 文字 ， 字 
体 颜色 为 蓝 色 。 
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16.2 ”综合 案例 2 一 一 文字 升降 特效 


有 的 网 页 为 了 加 大 广告 宣传 力度 ， 往 往 在 网 页 上 设置 一 个 自动 升降 的 文字 ， 用 于 吸引 注 
意 力 。 当 单 击 这 个 升降 文字 ， 会 自动 跳 转 到 宣传 页 面 。 本 实例 将 使 用 JavaScript 和 CSS 实现 
文字 升降 效果 ， 有 具体 步骤 如 下 。 

加 了 TY 分 析 需 求 。 

如 果 需 要 实现 文字 升降 效果 ， 需 要 指定 文字 内 容 和 文字 升降 范围 ， 即 文字 在 HTML 页 面 
指定 一 个 层 ， 用 于 升降 文字 。 实 例 完成 后 ， 实 际 效果 如 图 16-4 所 示 。 

葬 了 3 创建 HTML， 构 建 升降 DIV 层 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 升 降 的 文字 效果 </title> 

</head> 

<body> 

<div id="napis" style="position: absolute;top: -50;color: #000000;font- 
family :宋体 ;font-size:9pt;border:1lpx #ddeecc solid"> 

<a href="" style="font-size:12px;text-decoration:none;"> 
水 月 大 酒店 ， 欢 迎 天 下 来 宾 ! 

</a></div> 

<script language="JavaSscript"> 

es 

setTimeout('start()',20); 

WL 

</script> 

</body> 

</html> 


上 面 代码 创建 了 一 个 DIV 层 ， 用 于 存放 升降 的 文字 ， 层 的 D 名 称 是 napis， 并 在 层 的 
style 属性 中 定义 了 层 显示 样式 ， 如 字体 大 小 ， 带 有 边框 ， 字 形 等 。 在 DIV 层 中 ,创建 了 一 个 
超 链接 ， 并 设 定 了 超 链 接 的 样式 。 其 中 的 Script 代码 用 于 定时 调用 startO 函 数 。 

浏览 效果 如 图 16-5 所 示 ， 可 以 看 到 页 面 空 白 ， 无 文字 显示 。 
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图 16-4 文字 升降 效果 图 16-5 空白 页 面 
添加 JavaScript 代码 ， 实 现 文字 升降 效果 。 


<script language="JavaSsScript"> 
Ra 

done = 0; 

step=4 

function anim(yp,yk) 


售 30 


{ 

if(document.layers) document.layers["napis"] .top=yp; 
else document .all["napis"] .style.top=yp; 
if(yp>yk) step = -4 

if(yp<60) step = 4 

setTimeout ('anim('+(ypt+step)+', '+yk+')', 35); 
}function start() 

if(done) return 

done = 1; 

if(navigator.appName=="Netscape") { 

Var nap=document .getElementById ("napis"); 
nap.left=innerWidth/2 - 145; 
anim(60,innerHeight - 60) 

} 

GEse 

napis.style.left=11; 

anim(60,document .body.offsetHeight - 60) 
Vs 

</script> 


上 面 代码 创建 了 函数 anim0 和 start0， 其 中 anim0 函 数 用 于 设 定 每 次 的 升降 数值 ，start() 
函数 用 于 设 定 每 次 开始 的 升降 坐标 。 浏 览 效果 如 图 16-6 所 示 ， 页 面 中 的 文字 自动 上 下 移动 。 

















Oe ara P 








泗 同 只 其 蛋 }dJ2SeAEr 尖 6 SS9_.9]ANLH_ 几 9 器 所 
py A 


林 采 大 让， 欢 角 天 下 于 








图 16-6 文字 上 下 移动 效果 


16.3 ”综合 案例 3 一 一 跑马 灯 效 果 


网 页 中 有 一 种 特效 称 为 跑马 灯 ， 即 文字 从 左 到 右 自 动 输出 ， 和 晚上 写字 楼 的 广告 霓虹灯 
非常 相似 。 在 网 页 中 ， 如 果 CSS 样式 设计 得 非常 完美 ， 就 会 设计 出 更 加 靓丽 的 网 页 效果 ， 具 
体 步骤 如 下 。 

ET 分析 需求 。 

完成 跑马 灯 效 果 ， 需 要 使 用 JavaScript 语言 设置 文字 内 容 、 移 动 速度 和 相应 的 文本 框 ， 使 
用 CSS 设置 显示 文字 样式 。 文 本 框 用 来 显示 水 平移 动 文字 。 实 例 完成 后 ， 实 际 效果 如 图 16-7 
所 示 。 

TT23 创建 HTML， 实 现 输入 表单 。 


<!1DOCTYPE html> 

<html> 

<head> 

<title> 跪 马 灯 </title> 
</head> 

<body onLoad="LenScroll()"> 
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<center> 

<form name="nextForm"> 

<input type=text name="lenText"> 
</form> 

</center> 

</body> 


上 面 代码 非常 简单 ， 创 建 了 一 个 表单 ， 表 单 中 存放 了 一 个 文本 域 ， 用 于 显示 移动 文字 。 
浏览 效果 如 图 16-8 所 示 ， 可 以 看 到 页 面 中 只 是 存在 一 个 文本 域 ， 没 有 其 他 显示 信息 。 
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图 16-7 马 灯 效果 图 16-8 ”实现 基本 表单 
| TTB》 添加 JavaScript 代码 ， 实 现 文字 移动 。 


<script language="javascript"> 
var msg=" 品 味 中 原文 化 ， 寄 情 黄河 风景 "; // 移 动 文字 
var interval = 400; // 移 动 速度 


Var seq=0; 


function LenScroll() { 
document .nextForm.lenText .value = msg.substring(seq, msg.length) + " a 


+ msg; 
seq++? 
if ( seq > msg.length ) 
seq = 0; 


window.setTimeout ("LenSscroll();", interval); 
a 
上 面 代码 中 ， 创 建 了 一 个 变量 msg 用 于 定义 移动 的 文字 内 容 ， 变 量 interval 用 于 定义 文字 
移动 速度 ，LenScroll0 函 数 用 于 在 表单 文本 框 中 显示 移动 信息 。 
浏览 效果 如 图 16-9 所 示 ， 可 以 看 到 文本 框 中 显示 了 移动 信息 ， 并 且 从 右 向 左 移动 。 
ETI》 添加 CSs 代码， 修饰 输入 框 和 页 面 。 


<style type="text/css"> 


x== 

body{ 
background-color:#FFFFFF; /* 页 面 背景 色 */ 

} 

input{ 
background:transparent; /* 文本 框 背景 透明 */ 
border:none; /* 无 边框 */ 


color:#ffb400; 
font-size:45px; 
font-weight:bold; 
font-family: 黑 体 ; 
}--></style> 


全 ;0 
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上 面 代码 设置 了 页 面 背 景 颜色 为 白色 ， 在 input 标记 选择 器 中 ， 定 义 了 边框 背景 为 透明 ， 
无 边框 ， 字 体 颜色 为 黄色 ， 大 小 为 45 像素 ， 加 粗 并 黑体 显示 。 浏 览 效果 如 图 16-10 所 示 ， 可 
以 看 到 页 面 中 相 较 原来 页 面 字体 变 大 ， 颜 色 为 黄色 ， 没 有 文本 框 显示 。 
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图 16-9 ”实现 移动 效果 图 16-10 ”最终 效果 


16.4 ”综合 案例 4 一 一 左右 移动 的 图 片 


在 广告 栏 中 ， 经 常会 存在 从 右 向 左 移动 或 者 从 左 向 右 移动 的 图 片 ， 而 且 是 一 张 或 者 多 张 
图 片 ， 不 但 美化 了 页 面 效果 ， 也 可 获取 经 济 利益 。 本 实例 将 使 用 JavaSeript 和 CSS 创建 一 个 
左右 移动 的 图 片 ， 具 体 步骤 如 下 。 

EID 分 析 需 求 。 

实现 左右 移动 的 图 片 ， 需 要 在 页 面 上 定义 一 张 图 片 ， 然 后 利用 JavaSeript 程序 代码 ， 获 取 
图 片 对 象 ， 并 使 其 在 一 定 范围 内 即 水 平方 向 上 自由 移动 。 实 例 完成 后 ， 效 果 如 图 16-11 所 示 。 
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16-11 图 片 移动 效果 A 


GET 创建 HTML 页 面 ， 导 入 图 片 。 


<1DOCTYPE html> 


<html> 

<head> 
<title> 左 右 移动 图 片 </title> 
</head> 

<body> 


<img src="feng.jpg" name="picture" 

style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" 
HEIGHT="40"> 

<script LANGUAGE="JavaScript"><!-—— 

setTimeout ("moveLR('picture',300,1)",10); 

/></seript> 

</body> 

</html> 


全 
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上 面 代码 中 ， 定 义 了 一 个 图 片 ， 图 片 是 绝对 定位 ， 左 边 位 置 是 (70,30) 无 边框 ， 宽 度 为 140 
像素 ， 高 度 为 40 像素 。Script 标记 中 ， 使 用 setTimeout0 方 法 ， 定 时 移动 图 片 。 
浏览 效果 如 图 16-12 所 示 ， 可 以 看 到 网 页 上 显示 了 一 个 图 片 。 
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16-12 图片 显示 
加 入 JavaScript 代码 ， 实 现 图 片 左右 移动 。 


<script LANGUAGE="JavaScript"><!-—— 
step = 0; 

obj = new Image(); 

function anim(xp,xk,smer) //smer = direction 
{ 

obj.style.left = x; 

X += step*smer; 

if (x>=(xk+xp)/2) { 

IE (smer == 1) step-—-—; 

else Step++7 

} 

else { 

if (smer == 1) step++; 

else step— 
} 
EE ME y= RE) A 

X = Xk; 

Smer = -1 

} 

if (x <= xp) { 

x = xp; 

smer = 1; 

} 

PE (Bmer > 2) Smer = 37 

setTimeout ('anim('+xp+', '+xk+', '+smert+')', 50); 

} 

function moveLR(objID,movingarea width,c) 

' 

if (navigator.appName=="Netscape") window width = window.innerWidth; 
else window width = document .body.offsetWidth; 

obj = document .images [objID]; 

image width = obj.width; 

X1 = obj.style.left; 

x = Number (x1.substring (0,xl1.length-2)); // 30px -> 30 

if (c == 0) { 

if (movingarea width == 0) { 

right margin = window width - image width; 
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anim(x,right margin,1); 

i 

else { 

right margin = x + movingarea width - image width; 

if (movingarea width < x + image width) window.alert ("No space for 
moving!"); 

else anim(x,right margin,1); 

} 

} 

else { 

if (movingarea width == 0) right margin = window width - image width; 
else { 

X= Math.round ( (window width-movingarea width)/2); 

right margin = Math.round( (window width+movingarea width)/2)-image width; 
} 

anim(x,right margin,1); 

} 

} 

i==></acript> 


上 面 的 代码 与 文字 水 平方 向 移动 的 原理 基本 相同 ， 只 是 对 象 不 同 ， 这 里 就 不 再 详细 介 
绍 了 。 
浏览 效果 如 图 16-13 所 示 ， 网 页 上 显示 了 一 个 图 片 ， 并 在 水 平方 向 上 自由 移动 。 
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图 16-13 最终 效果 


16.5 ”综合 案例 5 一 一 向 上 滚动 菜单 


网 页 包含 信息 比较 多 的 时 候 ， 就 需要 设计 出 一 些 导 航 菜单 来 实现 页 面 导 航 。 如 果 使 用 
JavaScript 代码 ， 将 菜单 做 成 动态 效果 ， 此 时 菜单 会 更 加 吸引 人 。 本 实例 将 结合 前 面 学 习 的 内 
容 ， 创 建 一 个 向 上 滚动 的 菜单 ， 具 体 步 骤 如 下 。 

实现 菜单 自动 从 下 到 上 滚动 ， 需 要 把 握 两 个 元 素 ， 一 个 是 使 用 JavaScript 实现 要 滚动 的 菜 
单 ， 即 导航 栏 ， 另 一 个 是 使 用 JavaScript 控制 菜单 移动 方向 。 实 例 完 成 后 ， 效 果 如 图 16-14 
所 示 。 

EEDUD9 构建 HTML 页 面 。 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 向 上 深 动 的 菜单 </title> 

</head> 

<body bgcolor="#FFFFFF" text="#000000"> 
</body></html> 


上 面 代码 比较 简单 ， 只 是 实现 了 一 个 空白 页 面 ， 页 面 背景 色 为 白色 ， 前 景色 为 黑色 。 
浏览 效果 如 图 16-15 所 示 ， 可 以 看 到 显示 了 一 个 空白 页 面 。 
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图 16-14 菜单 滚动 效果 图 16-15 空白 HTML 页 面 


加 入 JavaScript 代码 ， 实 现 菜单 滚动 。 


<script language=javascript> 








5 是 = 
\ Var index = 9 
link = new Array(8); 
link[0] = -htm' 
link[1] -htm' 
link[2] -htm' 
link[3] -htm' 
link[4] -htm' 
link[5] -htm' 
link[6] -htm' 
link[7] -htm' 
link[8] .htm' 


text = new Array(8); 


text[0] =' 首 页 ' 


text [1] =' 产 品 天 地 ' 
text [2] =' 关 于 我 们 ' 
text [3] =' 资 讯 动态 ' 
text[4] =' 服 务 支持 ' 
text[5] =' 会 员 中 心 ' 
text[6] =' 网 上 商城 ' 
text [7] =' 官 方 微 博 ' 
text[8] =' 企 业 文 化 ' 


document .write ("<marquee scrollamount='1' scrolldelay='100' direction= 
"up' width='"150' height="'150'>"); 
for (i=0;i<index;i++) 
{ 
document .write ("gnbsp;<img src='dian3.gif'" width='12' height='12'> 
<a href="+link[i]+" target="' blank'>"); 
document .write (text[i] + "</A><br>"); 
document -write ("</marquee>") 
// --></script> 


9 半生 


上 面 代码 创建 了 两 个 数组 对 象 link 和 text， 用 来 存放 菜单 链接 对 象 和 菜单 内 容 ， 在 其 后 
的 JavaScript 代码 中 ， 使 用 <marquee> 定 义 页 面 在 垂直 方向 上 上 下 移动 。 
浏览 效果 如 图 16-16 所 示 ， 可 以 看 到 面 左 侧 有 一 个 菜单 ， 自 下 向 上 自由 移动 。 













































16-16 最终 效果 
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16.6 ”综合 案例 6 一 一 跟随 鼠标 指针 移动 的 图 片 


在 众多 网 站 中 ， 特 别 是 游戏 网 站 或 小 型 商业 网 站 ， 都 喜欢 用 图 片 跟随 鼠标 指针 移动 的 特 
效 ， 一 方面 可 以 在 鼠标 指针 旁边 加 上 网 站 说 明 的 相关 信息 或 者 欢迎 信息 ， 另 一 方面 也 可 吸引 
浏览 者 的 注意 力 ， 使 其 更 加 关注 此 类 网 站 。 本 实例 实现 图 片 跟 随 鼠 标 指针 移动 的 特效 ， 具 体 
步骤 如 下 。 

EEC 分 析 需 求 。 

需要 通过 JavaScript 获取 鼠标 指针 的 位 置 ， 并 且 动 态 地 调整 图 片 的 位 置 。 图 片 需要 通过 
position 的 绝对 定位 ， 很 容易 得 到 调整 。 采 用 CSS 的 绝对 定位 是 JavaScript 调整 页 面 元 素 常用 
的 方法 。 实 例 完 成 后 ， 效 果 如 图 16-17 所 示 。 








图 16-17 图片 移动 
EEJDy 创建 基本 的 HIML 页 面 。 


<!DOCTYPE html> 

<html > 

<head> 

<title> 随 鼠标 指针 移动 的 图 片 </title> 
</head> 

<body> 

</body> 

</html> 


上 面 的 代码 比较 简单 ， 只 是 实现 了 一 个 HIML 页 面 结构 ， 这 里 不 再 演示 。 
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添加 JavaScript 代码 ， 实 现 图片 随 鼠标 指针 移动 。 


<script type="text/javascript"> 
function badRAD (html){ 
Var ad=document .body.appendChild(document .createElement ('div')); 
ad.style.cssText="border:1px solid #000;background:#FFF;position: 
absolute;padding:4px 4px 4px 4px;font: 12px/1.5 verdana;"; 
ad.innerHTML=html||'This is bad idea!l'; 
Var c=ad.appendChild(document.createElement ('span')); 
c.innerHTML="x"; 
c.style.cssText="position:absolute;right:4px;top:2px;cursor:pointer"; 
c.onclick=function (){ 
document .onmousemove=null; 
this.parentNode.style.left='-99999px"' 





}; 
document .onmousemove=function (e){ 
e=e| |window.event; 
var x=e.clientx,y=e.clientYy; 
setTimeout (function() { 
if(ad.hover)return; 
ad.style.left=x+5+'px'; 
ad.style.top=y+5+'px'; 
},120) 


ad.onmouseover=function (){ 
this.hover=true 
i 
ad.onmouseout=function (){ 
this.hover=false 
; 
} 
badaD('<img src="18.png">') 
</script> 


上 面 代码 中 ， 使 用 appendChild() 方 法 为 当前 页 面 创建 了 一 个 div 对 象 ， 并 为 div 层 设置 了 
相应 样式 。 然 后 e.clientX 和 e.clientY 语句 确定 鼠标 光标 位 置 ， 并 动态 调整 图 片 位 置 ， 从 而 实 
现 图 片 移动 的 效果 。 浏 览 效果 如 图 16-18 所 示 ， 可 以 看 到 鼠标 指针 在 页 面 上 移动 时 ， 图 片 跟 
着 移动 。 








16-18 ”最 终 效果 


16.7 ”综合 案例 7 一 一 树 形 菜单 


作为 一 个 网 站 的 首页 ， 其 特点 之 一 是 需要 导航 的 页 面 很 多 ， 有 时 为 了 效果 不 得 不 将 所 有 
需要 导航 的 部 分 都 放 到 一 个 导航 菜单 中 。 树 形 导 航 菜单 是 网 页 设计 中 最 常用 的 菜单 之 一 。 本 
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实例 将 创建 一 个 树 形 菜单 ， 具 体 步 又 如 下 。 

加 TD 分 析 需 求 。 

实现 一 个 树 形 菜单 ， 需 要 3 个 方面 的 配合 ， 一 个 是 <ul> 无 序列 表 ， 用 于 显示 的 菜单 ， 另 
一 个 是 CSS 样式 ， 修 饰 树 形 菜单 样式 ， 还 有 一 个 是 JavaScript 程序 ， 实 现 单 击 时 展开 菜单 选 
项 。 实 例 完成 后 ， 效 果 如 图 16-19 所 示 。 
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16-19” 树 形 菜单 


创建 HTML 页 面 ， 实 现 菜单 列表 。 


<!DOCTYPE html> 
<html > 
<head> 
<title> 树 形 菜单 </title> 
</head> 
<body> 
<ul id="menu zzjs net"> 
ES 
<label><a href="javascript:;"> 计 算 机 图 书 </a></label> 
<ul class="two"> 
AR 
<label><a href="javascript:;"> 程 序 类 图 书 </a></label> 
<ul class="two"> 
< 
<label><input type="checkbox" value="123456"><a href= 
"javascript:;">Java 类 图 书 </a></1label> 
<ul class="two"> 


<li><label><input type="checkbox" value="123456"><a href= 
"javascript:;">Java 语言 类 图 像 </a></label></1i> 

<1i> 

<label><input type="checkbox" value="123456"><a href= 


"javascript:;">Java 框架 类 图 像 </a></label> 
<ul class="two"> 
i 
<label><input type="checkbox" value="123456"><a href= 
"javascript:;">Struts2 图 书 </a></1label> 
<ul class="two"> 
<li><label><input type="checkbox"™" value="123456"><a href= 
"javascript:;">strutsl</a></label></1i> 
<li><label><input type="checkbox"™ value="123456"><a href= 
"javascript:;">struts2</a></label></1i> 
</ul> 
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</1i> 
<li><label><input type="checkbox™ Value="123456"><a href= 
"javascript:;">Hibernate 入 门 </a></label></1i> 
</ul> 
</1i> 
</ul> 
去 /> 
</ul> 
</Ii> 
< 
<label><a href="javascript:;"> 设 计 类 图 像 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a href= 


"javascript:;">PS 实例 大 全 </a></label></1i> 
<li><label><input type="checkbox" value="123456"><a href= 
"javascript:;">Flash 基础 入 门 </a></label></1i> 
</ul> 
</1i> 
</ul> 
= 

</ul> 
</body> 
</html> 


浏览 效果 如 图 16-20 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显示 ， 并 且 显 示 全 部 元 素 ， 字 体 
颜色 为 蓝 色 。 





























16-20 无 序列 表 


添加 JavaScript 代码 ， 实 现 单 击 后 展开 列表 。 


<script type="text/javascript" > 
function addEvent (el,name, fn) {// 绑 定 事件 
if(el.addEventListener) return el.addEventListener (name,fn,false); 
return el.attachEvent ('on'+name, fn); 
} 
function nextnode (node){// 寻 找 下 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!node)return 7 
if(node.nodeType == 1) 
return node; 
if(node.nextSibling) 
return nextnode (node.nextSibling); 


} 


function prevnode (node){// 寻 找 上 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!node)return ; 
if(node.nodeType == 1) 
return node; 
if(node.previousSibling) 
return prevnode (node.previousSibling); 
} 
function parcheck(self,checked){// 递 归 寻 找 父亲 元 素 ， 并 找到 input 元 素 进行 操作 
var par = prevnode (self.parentNode.parentNode.parentNode.PreviousSibling)， 
parspar; 
if(pargg&par.getElementsByTagName ('input') [0]){ 
par.getElementsByTagName ('input') [0] .checked = checked; 
parcheck (par.getElementsByTagName ('input') [0],sibcheck 
(par.getElementsByTagName ('input') [0])); 
} 
} 
function sibcheck(self){// 判 断 兄 弟 节 点 是 否 已 经 全 部 选中 
var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0; 
forl(var i=0;i<sbi.length;i++){ 
if(sbi[i] .nodeType != 1)// 由 于 孩子 节点 中 包括 空 的 文本 节点 ， 所 以 这 里 累计 长 度 的 
时 候 也 要 算 上 去 
DE 
else if(sbi[i] .getElementsByTagName('input') [0] .checked) 
了 二 十 
} 
return n==sbi.length?true:false; 
} 
addEvent (document .getElementById('menu zzjs net'),'click',function(e){ 
// 绑 定 input 单 击 事件 ， 使 用 menu_zzjs_net 根 元 素 代理 
e = ellwindow.event7 
Var target = e.target1|le.srcElement7 
Var tp = nextnode (target.parentNode .nextSibling) 
switch(target.nodeName){ 


case 'A':// 单 击 A 标签 展开 和 收缩 树 形 目录 ， 并 改变 其 样式 会 选中 checkbox 








if(tp&&tp.nodeName == "UL'){ 

if(tp.style.display != 'block' ){ 
tp.style.display = 'block'; 
prevnode (target .parentNode.previousSibling) .className = 'ren' 
}elsel{ 
tp.style.display = 'none'; 
prevnode (target .parentNode.previousSibling) .className = "add' 
} 

break; 


case 'SPAN' :// 单 击 图 标 只 展开 或 者 收缩 


Var ap = nextnode (nextnode (target .nextSibling) .nextSibling); 


if(ap.style.display != 'block' ){ 
ap.style.display = 'block'; 
target.className = 'ren’' 

J}elsef{ 

ap.style.display = 'none'; 
target.className = "add'" 

} 

break; 





0 
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case 'INPUT':// 单 击 checkbox， 父 亲 元 素 选中 ， 则 孩子 节点 中 的 checkbox 也 同时 选 


中 ， 如 孩子 节点 取消 则 父 元 素 随 之 取消 
IE (target -checked) {f 


if(tp){ 
Var checkbox = tp.getElementsByTagName ('input'); 


Eor (Var i=0;i<checkbox.length;i++) 
checkbox [i] .checked = true; 

} 

}elsef{ 


if (tp){ 
Var checkbox = tp.getElementsByTagName ('input'); 


forl(var i=0;i<checkbox.length;i++) 
checkbox[i] .checked = false; 





} 
3 
parcheck (target, sibcheck(target) ) ;// 当 孩子 节点 取消 选中 的 时 候 调 用 该 方法 递归 


其 父 节 点 的 checkbox 逐一 取消 选中 
break; 
} 
Ds; 
window.onload = function (){// 页 面 加 载 时 给 有 孩子 节点 的 元 素 动 态 添加 图 标 


document .getElementById('menu zzjs net') .getElementsByTagName 





var labels = 
('label'); 

forl(var i=0;i<labels.length;i++){ 
document .createElement ('span'); 
='display:inline-block;height:18px;vertical-align: 


var span = 
span.style.cssText 


middle;width:16px;cursor:pointer;'; 
' 


span.innerHTML = 
span.className = 'add'; 
if (nextnode (labels [i] .nextSibling)&&nextnode (labels[i] .nextSibling) .nodeName 


== "UL') 
labels[i] .parentNode .insertBefore (span,labels[i]); 


else 
labels[i].className = 'rem’' 


} 


} 
</script> 


浏览 效果 如 图 16-21 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显示 ， 使 用 鼠标 单 击 可 以 展开 或 
关闭 相应 的 选项 ， 但 其 样式 非常 难看 。 
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图 16-21 实现 鼠标 单 击 事件 


添加 CSS 代码 ， 修 饰 列表 选项 。 


<style type="text/css"> 

body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} 
ul,l1i, {margin:0;padding:0;} 

ul{list-style:none;} 


#menu 
#menu 
#menu 
#menu 
#menu 
#menu 


zzjs 
zzjs 
zzjs 
zzjs 
zzjs 
过 2 全 


net{margin:10px;width:200px;overflow:hidden;} 
net li{line-height:25px;} 

net .rem{padding-left:16px;} 

net .add{background:url() -4px -31lpx no-repeat;} 
net .ren{background:url() -4px -7px no-repeat;} 


net 巴 半 a{color:#666666;padding-left:S5px;outline:none;blr: 


expression(this.onFocus=this.blur());} 

#menu zzjs net 1i input{vertical-align:middle;margin-left:S5px;} 
#menu zzjs net .two{fpadding-left:20px;display:none;} 

</style> 


浏览 效果 如 图 16-22 所 示 ， 可 以 看 到 样式 相 比 较 原来 的 页 面 变 得 非常 漂亮 。 
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图 16-22 ”最终 效果 


16.8 ”综合 案例 8 一 一 颜色 选择 器 


在 页 面 中 定义 背景 色 和 字体 颜色 ， 是 比较 常见 的 一 种 操作 ， 往 往 选 取 颜 色 时 比较 发 悉 ， 


不 知道 哪 种 颜色 适合 ， 并 且 颜 色 值 还 不 知道 是 什么 。 此 时 可 以 利用 颜色 选择 器 来 定义 颜色 并 


获取 颜色 值 。 本 实例 将 创建 一 个 颜色 选择 器 ， 可 以 自由 获取 颜色 值 ， 具 体 步骤 如 下 。 
TD 分 析 需 求 。 


本 实例 原 至 





非常 简单 ， 就 是 将 几 个 常用 的 颜色 值 进行 组 合 ， 组 合 在 一 起 后 合并 ， 就 是 所 


要 选择 的 颜色 值 。 这 些 都 是 利用 JavaScript 代码 完成 的 。 实 例 完成 后 ， 实 际 效果 如 图 16-23 所 示 。 
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16-23” 设 定 页 面 背景 色 
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创建 基本 HTML 页 面 。 
<!1DOCTYPE html> 
<html> 
<head><title> 背 景色 选择 器 </title> 
</head> 
<body bgcolor="#FFFFFF"> 
</body></html> 


上 述 代码 比较 简单 ， 只 是 实现 了 一 个 页 面 框架 ， 这 里 就 不 再 显示 了 。 
添加 JavaSeript 代码 ， 实 现 颜色 选择 。 


<script language="JavaScript"> 





于 

Var hex = new Array(6) 
hex[0] = "FF™" 

hex[1] = "CEC" 
ee 

hex[3] = "66" 

hex[4] = "33" 


hex[5] = "00" 
function display (triplet) 
{ 
document .bgColor = '#' + triplet 
alert (' 现 在 的 背景 色 是 #'+triplet) 
} 
function drawCell (red, green, blue) 
本 
document .write ('<TD BGCOLOR="#' + red + green + blue + '">') 
document .write('<A HREF="javascript:display(\'' + (red + green + blue) 
+ NN) ">') 
document .write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>') 
document .write('</A>') 
document .write('</TD>') 
} 
function drawRow (red, blue) 
{ 
document .write('<TR>') 
ForE (var HB = /07 < G67 ty 
{ 
drawCell (red, hex[i], blue) 
} document.write('</TR>') 
}function drawTable (blue) 
document .write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>') 
OE (Va = 0 < OF Ft) 
. 
drawRow (hex[i], blue) 
} 
document .write('</TABLE>') 
} 
function drawCube () 
本 
document .write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>') 


Lor Vvar T= 0 < Gp 
{ 
document .write('<TD BGCOLOR="#FFFFFF">') 
drawTable (hex[i]) 
document .write('</TD>') 
} document.write('</TR></TABLE>') 
}drawCube () 
// --></script> 


上 面 代码 中 ， 创 建 了 一 个 数组 对 象 hex 用 来 存放 不 同 的 颜色 值 。 然 后 调用 几 个 函数 分 别 
将 数组 中 的 颜色 组 合 在 一 起 并 在 页 面 显示 ，display0 函 数 完成 定义 背景 颜色 和 显示 颜色 值 。 
浏览 效果 如 图 16-24 所 示 ， 可 以 看 到 页 面 显示 了 多 个 表格 ， 每 个 单元 格 代表 一 种 颜色 。 





























图 16-24 最终 效果 


16.9 高 手 甜 点 


甜点 1: JavaScript 中 innerHTML 与 innerText 的 用 法 与 区 别 ? 
假设 现在 有 个 div 层 ， 如 下 所 示 。 
<div id="test"> 


<span style="color:red">testl</span> test2 
</div> 


innerText 属性 表示 从 起 始 位 置 到 终止 位 置 的 内 容 ， 但 去 除了 HTML 标签 ， 如 上 面 示例 代 
人 码 中 的 innerText 的 值 也 就 是 testl test2， 其 中 span 标签 被 去 除了 。 

innerHTML 属性 除了 全 部 内 容 外 ,还 包含 对 象 标签 本 身 ， 如 上 面 示例 代码 中 的 
text.outerHTML 的 值 也 就 是 <div id="test"><span style="color:red">test1</span> test2</div>。 


甜点 2: JavaScript 如 何 控制 换行 ? 
无 论 使 用 哪 种 引号 创建 字符 串 ， 字 符 串 中 间 不 能 包含 强制 换行 符 。 


Var temp=’<h2 class=”a”>A list</h2> 
<ol> 
</ol> 
上 面 的 写法 是 错误 的 。 
正确 写法 是 使 用 反 斜 杠 来 转 义 换行 符 ， 如 下 所 示 。 
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var temp="<h2 class=”a”>A list</h2>\ 
<ol>\ 
</ol>" 


16.10” 跟 我 练 练 手 


练习 1: 制作 一 个 包含 打字 效果 的 网 页 。 
练习 2: 制作 一 个 包含 文字 升降 效果 的 网 页 。 
练习 3: 制作 一 个 包含 跑马 灯 效 果 的 网 页 。 
练习 4: 制作 一 个 图 片 闪烁 效果 的 网 页 。 
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jQuery 又 推出 了 新 的 函数 库 jQuery 
































是 
Ta 尼 
外 
这 冯 王 
EE 有 
Rm 呈 
由 起 本 
湛江 种 
祥 届 种 
深 朱 人 
区 妊 此 
K 长 加 
Rt 
赤 沁 济 口 

二 

号 






































APP 和 移动 网 站 开发 
一 一 案例 课堂 ~ 





17.1 认识 jQuery Mobile 


jQuery Mobile 是 jQuery 在 手机 和 平板 设备 上 的 版 本 。jQuery Mobile 不 仅 给 主流 移动 平 
台 带 来 了 jQuery 核心 库 ， 而 且 会 发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 。 通 过 jQuery 
Mobile 制作 出 来 的 网 页 能 够 支持 全 球 主流 的 移动 平台 ， 而 且 在 浏览 网 页 时 ， 能 够 拥有 像 操 作 
应 用 软件 一 样 的 触 碰 和 滑动 效果 。 
jQuery Mobile 的 优势 如 下 。 
@ 简单 易 用 : jQuery Mobile 简单 易 用 。 页 面 开发 主要 使 用 标记 ， 无 须 或 仅 需 很 少 的 
JavaScript。jQuery Mobile 通过 HTML 5 标记 和 CSS 3 规范 来 配置 和 美化 页 面 ， 对 于 
已 经 熟悉 HTML 5 和 CSS 3 的 读者 来 说 ， 上 手 非常 容易 ， 架 构 清晰 。 
@ 跨 平 台 : 目前 大 部 分 的 移动 设备 浏览 器 都 支持 HTML 5 标准 和 jQuery Mobile， 所 以 
可 以 实现 跨 不 同 的 移动 设备 ， 如 Android 、Apple iOS 、BlackBerry 、Windows 
Phone、Symbian 和 MeeGo 等 。 
@ 提供 丰富 的 函数 库 : 常见 的 键盘 、 触 碰 功 能 等 ， 开 发 人 员 不 用 编写 代码 ， 只 需要 经 
过 简单 的 设置 ， 就 可 以 实现 需要 的 功能 ， 大 大 减少 了 程序 员 开 发 的 时 间 。 
@ ”丰富 的 布景 主题 和 ThemeRoller 工具 : jQuery Mobile 提供 了 布局 主题 ， 通 过 这 些 主 
题 ， 可 以 轻 轻 松 松 地 快速 创建 绚丽 多 彩 的 网 页 。 通 过 使 用 jQuery UT 的 ThemeRoller 
在 线 工 具 ， 只 需要 在 下 拉 菜 单 中 进行 简单 的 设置 ， 就 可 以 制作 出 丰富 多 彩 的 网 页 风 
格 ， 并 且 可 以 将 代码 下 载 下 来 进行 应 用 。 
jQuery Mobile 的 操作 流程 如 下 。 
(1) 创建 HTML 5 文件。 
(2) 载 入 jQuery、jQuery Mobile 和 jQuery Mobile CSS 链接 库 。 
(3) 使 用 jQuery Mobile 定义 的 HTML 标准 ， 编 写 网 页 架构 和 内 容 。 





17.2 ” 跨 平 台 移动 设备 网 页 jQuery Mobile 


学 习 移 动 设 备 的 网 页 设计 开发 ， 最 大 的 难题 是 跨 浏览 器 支持 的 问题 。 为 了 解决 这 个 问 
题 ，jQuery 推出 了 新 的 函数 库 jQuery Mobile， 主 要 用 于 统一 当前 移动 设备 的 用 户 界面 。 


17.2.1 案例 1 一 一 移动 设备 模拟 器 


网 页 制作 完成 后 ， 需 要 在 移动 设备 上 预览 最 终 的 效果 。 为 了 方便 预览 效果 ， 可 以 使 用 移 
动 设备 模拟 器 ， 常 见 的 移动 设备 模拟 器 是 Opera Mobile Emulator。 

Opera Mobile Emulator 是 一 款 针对 计算 机 桌面 开发 的 模拟 移动 设备 的 浏览 器 ， 几 乎 完全 
重 现 opera mobile 手机 浏览 器 的 使 用 效果 ， 可 自行 设置 需要 模拟 的 不 同型 号 的 手机 和 平板 电脑 
配置 ， 然 后 在 计算 机 上 模拟 各 类 手机 等 移动 设备 访问 网 站 。 

Opera Mobile Emulator 的 下 载 网 址 为 http://www.opera.com/zh-cn/developer/mobile- 
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emulator/， 根 据 不 同 的 系统 选择 不 同 的 版 本 ， 这 里 选择 Windows 系统 下 的 版 本 ， 如 图 17-1 所 示 。 


三 辣 六 
区 -0 opera com/ -cn/deve ope /moble emuaor po 

O opera eic cossee 

文人 EV) A RT) 





Your Web, documented. 


| 
Ws sn .a 


Do your mobile deyelopment straight from your desktop. and pair it with Opera Dragonfiy for odvancod 
debugging. 








图 17-1 Opera Mobile Emulator 的 下 载 页 面 
下 载 并 安装 之 后 启动 Opera Mobile Emulator， 打 开 如 图 17-2 所 示 的 窗口 ， 在 【资料 】 列 
表 框 中 选择 移动 设备 的 类 型 ， 这 里 选择 【LG Optimus 3D】 选 项 ， 单 击 【启动 】 按 钮 。 
此 时 将 打开 欢迎 界面 ， 用 户 可 以 单 击 不 同 的 链接 ， 查 看 该 软件 的 功能 ， 如 图 17-3 所 示 。 
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@ operaMo-， — 口 x | 
欢迎 使 用 Dpera Mobile 
12.11 
©@ Opera Mobile Emulator 一 x ’ DE 
资料 
HTC One x ^| 分 汶 诗 WOK Portrait (430X800) 
HTC Sensation i 
HTC Tattoo 
HTC Wildfire 像素 密度 216 - 
LG Intuition E37 [9 
16 Optimus 3D 
LG Optimus One 用 户 界面 Touch > 
LG T-Mobile G2X Vser Agent 字符 帅 Mndroid 到 
Lenovo Ideapad K1 
Motorola Atrix 4G | = [ET 
一 
EN Ws 让 时 完全 重 轩 济 时 口 
帮助 更 约 语 计 LG opt 480x80t ppt 21¢ [Gs| |50% | 
17-2 ”参数 设置 界面 17-3 ”欢迎 界面 





单 击 【接受 】 按 钮 ， 打 开 手 机 模拟 器 窗口 ， 在 【输入 网 站 】 文 本 框 中 输入 需要 查看 网 页 
效果 的 地 址 即 可 ， 如 图 17-4 所 示 。 

例如 ， 这 里 直接 单 击 【 当 当 网 】 图 标 ， 即 可 查看 当当 网 在 该 移动 设备 模拟 器 中 的 效果 ， 
如 图 17-5 所 示 。 
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图 17-4 手机 模拟 器 窗口 图 17-5 查看 预览 效果 


Opera Mobile Emulator 不 仅 可 以 查看 移动 网 页 的 效果 ， 还 可 以 任意 调整 窗口 的 大 小 ， 从 
而 可 以 查看 不 用 屏幕 尺寸 的 效果 ， 这 点 也 是 Opera Mobile Emulator 与 其 他 移动 设备 模拟 器 相 
比 最 大 的 优势 。 


17.2.2 ”案例 2 一 一 Query Mobile 的 安装 

想 要 开发 jQuery Mobile 网 页 ， 必 须要 引用 JavaScript 函数 库 (js)、CSS 样式 表 和 配套 的 
jQuery 函数 库 文件 。 常 见 的 引用 方法 有 以 下 两 种 。 

1. 直接 引用 jQuery Mobile 库 文件 


从 jQuery Mobile 的 官网 下 载 该 库 文 件 (网 址 是 http://jquerymobile.com/download/)， 如 
17-6 所 示 。 
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图 17-6 下 载 jQuery Mobile 库 文件 
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下 载 完成 即 可 解压 ， 然 后 直接 引用 文件 即 可 ， 代 码 如 下 。 


<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 

<script src="jquery.js"></script> 

<script src="jquery.mobile-1.4.5.js"></script> 

</head> 


将 下 载 的 文件 解压 到 和 网 页 所 在 的 同一 目录 下 ， 否 则 会 无 法 引用 而 报错 。 
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细心 的 读者 会 发 现 ， 在 <scripf> 标 签 中 没有 插入 type="text/javascript"， 这 是 什么 原因 呢 ? 


因为 所 有 的 浏览 器 中 HTML 5 的 默认 脚本 语言 就 是 JavaScript， 所 以 在 HTML 5 中 已 经 不 再 需 
要 该 属性 。 


2. 从 CDN 中 加 载 jQuery Mobile 


CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 络 。 其 基本 思路 是 尽 可 能 避 开 互 
联网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传输 更 快 、 更 稳定 。 

使 用 CDN 中 加 载 jQuery Mobile, 用 户 不 需要 在 计算 机 上 安装 任何 东西 ， 仅 需要 在 网 页 中 
加 载 层 登 样式 (css) 和 JavaScript 库 (js) 就 能 够 使 用 jQuery Mobile。 

用 户 可 以 从 jQuery Mobile 官网 中 查找 引用 路 径 ， 网 址 是 http://jquerymobile.com/ 
download/， 进 入 该 网 站 后 ， 找 到 jQuery Mobile 的 引用 链接 ， 然 后 将 其 复制 后 添加 到 HTML 
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文件 <head> 标 记 中 即 可 ， 如 图 17-7 所 示 。 
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Copy-and-Paste snippet for jQuery CDN hosted les 
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Google CDN 
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17-7 下 载 jQuery Mobile 库 文件 


将 代码 复制 到 <head> 标 记 块 内 ， 代 码 如 下 。 


<head> 


<!-- meta 使 用 viewport 以 确保 页 面 可 自由 缩放 --> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- 引入 jQuery Mobile 样式 --> 

<link rel="stylesheet" 
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href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<!-- 引入 jQuery 库 --> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<!-- 引入 jQuery Mobile 库 --> 


<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
1.4.5.min.js"></script> 
</head> 


@: 由 于 jQuery Mobile 函数 库 仍然 在 开发 中 ， 所 以 引用 的 链接 中 的 版 本 号 可 能 会 
证 上 与 本 书 不 同 ， 请 使 用 官方 提供 的 最 新 版 本 ， 只 要 按照 上 述 方法 将 代码 复制 下 来 引用 
” 即 可 。 





17.2.3 ”案例 3 一 一 Query Mobile 网 页 的 架构 


jQuery Mobile 网 页 是 由 header、content 与 footer 这 3 个 区 域 组 成 的 架构 ， 利 用 <div> 标 记 
加 上 HTML 5 自 定义 属性 data-* 来 定义 移动 设备 网 页 组 件 样式 ， 最 基本 的 属性 data-role 可 以 
用 来 定义 移动 设备 的 页 面 架构 ， 语 法 格式 如 下 。 
<div data-role="page"> 
<!-- 开 始 一 个 page--> 
<div data-role="header"> 
<h1> 这 个 是 标题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 这 里 是 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 底 部 文本 </h1> 
</div> 
</div> 


模拟 器 中 预览 效果 如 图 17-8 所 示 。 
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图 17-8 程序 预览 效果 
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页 面 





























从 结果 中 可 以 看 出 ，jQuery Mobile 网 页 以 页 (page) 为 单位 ， 一 个 HIML 页 面 可 以 放 一 个 
， 也 可 以 放 多 个 页 面 ， 浏 览 器 每 次 只 会 显示 一 页 ， 如 果 有 多 个 页 面 ， 需 要 在 页 面 中 添加 





超 链 接 ， 从 而 实现 多 个 页 面 的 切换 。 


案例 分 析 : 

@ data-role="page" 是 在 浏览 器 中 显示 的 页 面 。 

@ data-role="header"” 是 在 页 面 顶部 创建 的 工具 条 ， 通 常用 于 标题 或 者 搜索 按钮 。 
@ data-role="main" 定义 了 页 面 的 内 容 ， 如 文本 、 图 片 、 表 单 和 按钮 等 。 

@ "ui-content” 类 用 于 在 页 面 添加 内 边 距 和 外 边 距 。 

@ ”data-role="footer” 用 于 创建 页 面 底部 工具 条 。 


17.3 ”案例 4 一 一 创建 多 页 面 的 jQuery Mobile 网 页 


本 案例 将 使 用 jQuery Mobile 制作 一 个 多 页 面 的 jQuery Mobile 网 页 ， 并 创建 多 个 页 面 ， 


使 用 不 同 的 id 属性 来 区 分 不 同 的 页 面 。 


【 例 17.1】( 案 例文 件 ， ch17\17.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
ld 5 min ja"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 几 回 花 下 坐 哆 第， 银汉 红 墙 入 望 遥 。</p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗人 </h1> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 似 此 星辰 非 昨 夜 ， 为 谁 风 露 立 中 宵 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
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<h1> 清 代 诗 人 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 17-9 所 示 。 单 击 【 下 
所 示 。 单 击 【 上 一 页 】 链 接 ， 即 可 返回 到 第 一 页 中 。 
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古诗 欣赏 古诗 欣赏 
几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 遥 。 似 此 星辰 非 昨夜 ， 为 谁 风 露 立 中 宵 。 
下 一 页 上 一 页 

清 代 诗人 清 代 诗人 
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图 17-9 程序 预览 效果 17-10 ”第 二 页 预览 效果 


17.4 ”案例 5 一 一 将 页 面 作为 对 话 框 使 用 


对 话 框 是 用 于 显示 页 面 信息 或 者 显示 表单 信息 的 。jQuery Mobile 通过 在 链接 中 添加 如 下 
属性 ， 即 可 将 页 面 作为 对 话 框 来 使 用 。 


data-dialog="true" 


【 例 17.2】( 案 例文 件 : ch17\17.2.htmD 


<1DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 














<h1> 古 诗 鉴 赏 </h1> 
</div> 
<div data-role="main™ 


</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 


<div data-role="page" data-dialog="true" id="second"> 


<div data-role="header"> 
<h1> 诗 词 鉴 党 </h1> 
</div> 


<div data-role="main" class="ui-content"> 


<p> 这 首 诗 是 《已 交 杂 诗 》 的 第 五 首 ， 写 诗人 离 京 的 感受 。 虽 然 载 着 “浩荡 离愁 ”， 却 表示 仍然 要 


为 国 为 民 尽 自己 最 后 一 份 心力 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 17-11 所 示 。 
图 17-12 所 示 。 
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古诗 鉴赏 





浩荡 离 悉 白 日 冬 ， 吟 闪 东 指 即 天 涯 。 落 红 
不 是 无 情 物 ， 化 作 春 泥 更 护 花 。 





查看 详情 
清 代 诗 词 
人 白 国 … 
图 17-11 程序 预览 效果 





class="ui-content"> 
<p> 浩 荡 离愁 白 日 斜 ， 吟 鞭 东 指 即 天 涯 。 落 红 不 是 无 情 物 ， 化 作 春 泥 更 护 花 。</p> 
<a href="#second"> 查 看 详情 </a> 
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单 击 【 查 看 详情 】 链 接 ， 即 可 打开 一 个 对 话 框 ， 如 


© Opee Mobie - HTC Evo 10 0 x 
file://localhost/C:/User: 请 Google  ] 
诗词 鉴赏 


这 首 诗 是 《已 雍 杂 诗 》 的 第 五 首 , 写 
诗人 离 京 的 感受 。 虽 然 载 着 “浩荡 离 
愁 ”, 却 表示 仍然 要 为 国 为 民 尽 自己 最 
后 一 份 心力 。 


= 页 





清 代 诗 词 
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图 17-12 ”对 话 框 预 览 效 果 


从 结果 可 以 看 出 ， 对 话 框 与 普通 页 面 不 同 ， 它 显示 在 当前 页 面 上 ， 但 又 不 会 填充 完整 的 


页 面 ， 顶 部 图 标 


"用 于 关闭 对 话 框 ， 单 击 【 上 一 页 】 链 接 ， 也 可 以 关闭 对 话 框 。 
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17.5 “案例 6 一 一 绚丽 多 彩 的 页 面 切 换 效 果 
jQuery Mobile 提供 了 各 种 页 面 切换 到 下 一 个 页 面 的 效果 。 主 要 通过 设置 data-transition 属 
性 来 完成 各 种 页 面 切换 效果 ， 语 法 规则 如 下 。 
<a href="#1ink"” data-transition=" 切 换 效 果 "> 切 换 下 一 页 </a> 
其 中 ， 切 换 效果 很 多 ， 具 体 如 表 17-1 所 示 。 
表 17-1 页 面 切换 效果 




















页 面 效果 参数 含义 
fade 默认 的 切换 效果 。 淡 入 到 下 一 页 
none 无 过 渡 效 果 
flip 从 后 向 前 翻转 到 下 一 页 
flow 抛 出 当前 页 ， 进 入 下 一 页 
pop 像 弹 出 窗口 那样 转 到 下 一 页 
slide 从 右 向 左 滑动 到 下 一 页 
slidefade 从 右 向 左 滑动 并 淡 入 到 下 一 页 
slideup 从 下 向 上 滑动 到 下 一 页 
slidedown 从 上 向 下 滑动 到 下 一 页 
tum 转向 下 一 页 
了 由 工 


在 jQuery Mobile 的 所 有 链接 上 ， 默 认 使 用 淡 入 淡出 的 效果 。 


例如 ， 设 置 页 面 从 右 向 左 滑动 到 下 一 页 ， 代 码 如 下 。 


<a href="#second" data-transition="slide"> 切 换 下 一 页 </a> 


上 面 的 所 有 效果 支持 后 退行 为 。 例 如 ， 用 户 想 让 页 面 从 左 向 右 滑动 ， 可 以 添加 data- 
direction 属性 为 "reverse" 值 即 可 ， 代 码 如 下 。 


<a href="#second" data-transition="slide" data-direction="reverse"> 切 换 下 一 
页 </a> 


【 例 17.3】( 实 例文 件 : ch17\17.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
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</script> 
</head> 
<body> 


<div data-role="page" id="first"> 


<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 


<div data-role="main" class="ui-content"> 


<p> 老 农家 贫 在 山 住 ， 耕 种 山田 三 四 亩 。</p> 


<!-- 实 现 从 右 到 左 切换 到 下 一 页 --> 


<a href="#second" data-transition="slide"” > 下 一 页 </a> 


</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 


<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 


</div> 


<div data-role="main" class="ui-content"> 


<p> 岁 葡 钢 季 傍 空 室 ， 呼 儿 登 山 收 橡 实 。</p> 


<!-- 实 现 从 左 到 右 切换 到 下 一 页 --> 


<a href="#first" data-transition="slide" data-direction="reverse"> 上 一 页 


</a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
</body> 
</html> 
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模拟 器 中 预览 效果 如 图 17-13 所 示 。 单 击 【 下 一 页 】 链 接 ， 即 可 从 右 向 左 滑动 进入 第 二 
页 ， 如 图 17-14 所 示 。 单 击 【 上 一 页 】 链 接 ， 即 可 从 左 到 右 滑 动 返回 到 第 一 页 中 。 
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图 17-13 程序 预览 效果 
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APP 和 移动 网 站 开发 
一 一 一 案例 课堂 四 一 


17.6 高 手 甜 点 


甜点 1: 如 何在 模拟 器 中 查看 做 好 的 网 页 效果 ? 


HTML 文件 制作 完成 后 ， 要 想 在 模拟 器 中 测试 ， 可 以 在 地 址 栏 中 输入 文件 的 路 径 ， 如 输 
入 地 址 file:/Wlocalhostch16/16.2.html， 为 了 防止 输入 错误 ， 可 以 直接 将 文件 拖 息 到 地 址 栏 中 ， 
模拟 器 会 自动 帮助 用 户 添加 完整 的 路 径 。 


甜点 2: jQuery Mobile 都 支持 哪些 移动 设备 ? 





目前 市 面 上 移动 设备 非常 多 ， 如 果 想 查询 jQuery Mobile 都 支持 哪些 移动 设备 ， 可 以 参照 
jQuery Mobile 网 站 的 各 厂商 支持 表 ， 还 可 以 参考 维基 百科 网 站 对 jQuery Mobile 说 明 中 提供 的 
Mobile browser support 一 览 表 。 

甜点 3: 我 的 浏览 器 为 什么 不 支持 页 面 切 换 效果 ? 

为 了 实现 页 面 切换 效果 ， 浏 览 器 必须 先 支持 该 功能 。 目 前 ， 支 持 CSS 3 3D 切换 功能 的 浏 


览 器 最 小 版 本 包括 正 10.0 浏览 器 、Chrome 12.0 浏览 器 、FireFox 16.0 浏览 器 、Safari 4.0 浏览 
器 和 Opera 15.0 浏览 器 等 。 


17.7” 跟 我 练 练 手 


练习 1: 上 网 查询 jQuery Mobile 的 功能 和 优势 。 

练习 2: 下 载 并 安装 Opera Mobile Emulator 移动 设备 模拟 器 。 

练习 3: 制作 一 个 包含 3 个 页 面 的 jQuery Mobile 网 页 。 

练习 4: 制作 一 个 包含 对 话 框 的 jQuery Mobile 网 页 。 

练习 5: 制作 一 个 包含 两 个 页 面 的 jQuery Mobile 网 页 ， 并 实现 像 弹 出 窗口 那样 转 到 下 一 
页 的 切换 效果 。 
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jQuery Mobile 针对 用 户 界面 提供 了 各 种 各 种 可 视 化 的 标签 ， 包 括 按钮 、 复 选 
框 、 选 择 菜单 、 列 表 、 弹 窗 、 工 具 栏 、 面 板 、 导 航 和 布局 
起 使 用 ， 即 可 轻 轻松 松 地 开发 出 绚丽 多 彩 的 移动 网 页 。 本 章 


HTML 5 标记 一 
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18.1 套用 UI 组 件 


jQuery Mobile 提供 很 多 可 视 化 的 UI 组件 ， 只 要 套用 之 后 ， 就 可 以 生成 绚丽 并 且 适 合 移动 
设备 使 用 的 组 件 。jQuery Mobile 中 各 种 可 视 化 的 UI 组 件 与 HTML 5 标记 大 同 小 异 。 下 面 介 
绍 常用 的 组 件 用 法 ， 其 中 按钮 、 列 表 等 功能 变化 比较 大 的 后 面 会 做 详细 介绍 。 


18.1.1 表单 组 件 


jQuery Mobile 使 用 CSS 自动 为 HTML 表单 添加 样式 ， 让 它们 看 起 来 更 具 吸 引力 ， 触 摸 
起 来 更 具 友 好 性 。 
在 jQuery Mobile 中 ， 经 常 使 用 的 表单 控件 如 下 。 


1. 文本 框 
文本 输入 框 的 语法 规则 如 下 。 


<input type="text" name="fname" id="fname" Value="” "> 


其 中 value 属性 是 文本 框 中 显示 的 内 容 ， 也 可 以 使 用 placeholder 来 指定 一 个 简短 的 描 
述 ， 用 来 描述 输入 内 容 的 含义 。 
【 例 18.1】( 实 例文 件 ，ch18\18.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
T1425.mnI3"></acript> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 输 入 会 员 信 息 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<div class="ui-field-contain"> 
<label for="fullname"> 姓 名 : </label> 
<input type="text" name="fullname" id="fullname"> 
<label for="bday"> 出 生年 月 : </label> 
<input type="date" name="bday" id="bday"> 
<label for="email">E-mail:</label> 
<input type="email" name="email" id="email" placeholder=" 输 入 您 的 电子 邮箱 "> 
</div> 
<input type="submit" data-inline="true" value=" 注 册 "> 








</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-1 所 示 。 单 击 【出 生年 月 】 文 本 框 时 ， 会 自动 打开 日 期 选择 
器 ， 用 户 直 接 选择 相应 的 日 期 即 可 ， 如 图 18-2 所 示 。 
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图 18-1 程序 预览 效果 18-2 “日 期 选择 器 


2. 文本 域 


使 用 <textarea> 标 记 可 以 实现 多 行文 本 输入 效果 。 
【 例 18.2】( 实 例文 件 ，ch18\18.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
ld:5.min .Ia ></acript> 

</head> 
<body> 
<div data-role="first"> 

<div data-role="header"> 

<h1> 文 本 框 </h1> 

</div> 

<div data-role="main" class="ui-content"> 

<form> 





<div class="ui-field-contain"> 


<label for="info"> 输 入 最 喜欢 的 一 首 古诗 :</label> 
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<textarea name="addinfo" id="info"></textarea> 
</div> 
<input type="submit" data-inline="true" value=" 提 交 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-3 所 示 。 输 入 多 行内 容 时 ， 文 本 框 会 根据 输入 的 内 容 ， 自 动 调 
整 文本 框 的 高 度 ， 如 图 18-4 所 示 。 
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图 18-3 程序 预览 效果 图 18-4 选择 日 期 


3. 搜索 输入 框 


HTML 5 中 新 增 的 type="search" 类 型 为 搜索 输入 框 ， 是 为 搜索 输入 框 定义 文本 字段 。 
搜索 输入 框 的 语法 规则 如 下 。 


<input type="search" name="search"” id="search" placeholder=" 搜 索 内 容 "> 


搜索 输入 框 的 效果 如 图 18-5 所 示 。 


Q 


图 18-5 ”搜索 输入 框 效果 
4 范围 滑动 条 
使 用 <input type-"range"> 控 件 ， 即 可 创建 范围 滑动 条 ， 语 法 格式 如 下 。 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-show-value="true"> 
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其 中 ，max 属性 规定 允许 的 最 大 值 ， min 属性 规定 允许 的 最 小 值 ，type 属性 规定 合法 的 数 
字 间 隔 ; value 属性 规定 默认 值 ; data-show-value 属性 规定 是 否 在 按钮 上 显示 进度 的 值 ， 如 果 
设置 为 tue， 则 表示 显示 进度 的 值 ， 如 果 设 置 为 false， 则 表示 不 显示 进度 的 值 。 

【 例 18.3】( 实 例文 件 : ch18\18.3.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
L425.minja"></acript> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 工 作 进 度 申报 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<label for="points"> 工 作 完 成 的 进度 :</1label> 
<input type="range" name="points" id="points" value="50" min= 
max="100" data-show-value="true"> 
<input type="submit" data-inline="true" value=" 提 交 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-6 所 示 。 用 户 可 以 拖 动 滑 块 ， 选 择 需要 的 值 ， 也 可 以 通过 加 减 
按钮 ， 精 确 选 择 进 度 的 值 。 
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图 18-6 程序 预览 效果 
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使 用 data-popup-enabled 属性 可 以 设置 进度 值 显示 效果 ， 代 码 如 下 。 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-popup-enabled="true"> 


添加 后 的 效果 如 图 18-7 所 示 。 
滑 块 控件 
25 
进度 
25 1 | 
可 
提交 


图 18-7 进度 值 显示 效果 
使 用 data-highlight 属性 可 以 高 亮度 显示 滑动 条 的 值 ， 代 码 如 下 。 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
| data-highlight="true"> 


添加 后 的 效果 如 图 18-8 所 示 。 





图 18-8 ”高 亮度 显示 进度 值 效果 
5. 表单 按钮 


表单 按钮 分 为 3 种 ， 即 普通 按钮 、 提 交 按 钮 和 取消 按钮 ， 只 需要 在 type 属性 中 设置 表单 
的 类 型 即 可 ， 代 码 如 下 。 


<input type="submit" value=" 提 交 按 钮 "> 
<input type="reset" value=" 取 消 按钮 "> 
<input type="button"” value=" 普 通 按 钮 "> 


模拟 器 中 预览 效果 如 图 18-9 所 示 。 


提交 按钮 
取消 按钮 


图 18-9 ”表单 按钮 预览 效果 


当 用 户 在 有 限 数量 的 选择 中 仅 选 取 一 个 选项 时 ， 经 常用 到 表单 中 的 单 选 按钮 。 通 过 
type="radio" 可 创建 一 系列 的 单 选 按钮 ， 代 码 如 下 。 


<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 的 年 级 : </legend> 
<label for="one"> 一 年 级 </label> 
<input type="radio" name="grade" id="one" value="one"> 
<label for="two"> 二 年 级 </label> 
<input type="radio" name="grade" id="two" value="two"> 
<label for="three"> 二 年 级 </label> 
<input type="radio" name="grade" id=" three" value=" three"> 
</fieldset> 


模拟 器 中 预览 效果 如 图 18-10 所 示 。 
请 选择 您 的 年 级 : 


〇 二 年 级 


图 18-10 ” 单 选 按钮 效果 


pr <fieldset> 标 记 用 来 创建 按钮 组 ， 组 内 各 个 组 件 保持 自己 的 功能 。 在 <fieldset> 标 记 
以 内 添加 data-role="controlgroup"， 这 样 可 使 这 些 单 选 按钮 样式 统一 ， 看 起 来 像 一 个 组 
合 。 其 中 <legend> 标 签 用 来 定义 按钮 组 的 标题 。 


6. 复 选 框 
当 用 户 在 有 限 数 量 的 选择 中 选取 一 个 或 多 个 选项 时 ， 需 要 使 用 复 选 框 ， 代 码 如 下 。 


<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 喜爱 的 季节 : </legend> 
<label for="spring"> 春 天 </label> 
<input type="checkbox" name="season" id="spring" value="spring"> 
<label for="summer"> 夏 天 </label> 
<input type="checkbox" name="season" id="summer" value="summer"> 
<label for="fall"> 秋 天 </label> 
<input type="checkbox" name="season" id="fall" value="fall"> 
<label for="winter"> 冬 天 </label> 
<input type="checkbox" name="season" id="winter" value="winter"> 
</fieldset> 


模拟 器 中 预览 效果 如 图 18-11 所 示 。 
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请 选择 您 喜爱 的 季节 : 
春天 

夏天 
秋天 

冬天 


图 18-11 复 选 框 效果 
7. 选择 菜单 


使 用 <select> 标 签 可 以 创建 带 有 若干 选项 的 下 拉 列 表 框 。<select> 标 签 内 的 <option> 属 性 定 
义 了 列表 框 中 的 可 用 选项 ， 代 码 如 下 。 


<fieldset data-role="fieldcontain"> 
| <label for="day"> 选 择 值 日 时 间 : </1label> 
<select name="day" id="day"> 
<option value="mon"> 星 期 一 </option> 
<option value=" tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
| <option value="thu"> 星 期 四 </option> 
\ | <option value="fri"> 星 期 五 </option> 
<option value="sat "> 星期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</select> 
</fieldset> 


模拟 器 中 预览 效果 如 图 18-12 所 示 。 





选择 信 日 时 间 ;星期 一 
星期 三 T 


18-12 ”选择 菜单 效果 


如 果菜 单 中 的 选项 还 需要 再 次 分 组 ， 可 以 在 <select> 内 使 用 <optgroup> 标 签 ， 添 加 后 的 代 
码 如 下 。 
<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </label> 
<select name="day" id="day"> 
<optgroup label=" 工 作 昌 "> 





<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value=" fri"> 星 期 五 </option> 

</optgroup> 

<optgroup label=" 休 息 日 "> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 

</optgroup> 

</select> 

</fieldset> 


模拟 器 中 预览 效果 如 图 18-13 所 示 。 
选择 信 日 时 间 : 工作 日 


庆 监 In slqoW AenD[_ 坤 8| 洲 全 
py NG 


图 18-13 菜单 选项 分 组 后 的 效果 
如 果 想 选择 菜单 中 的 多 个 选项 ， 需 要 设置 <select> 标 签 的 multiple 属性 ， 设 置 代码 如 下 。 


<select name="day" id="day" multiple data-native-menu="false"> 


例如 ， 将 上 面 的 代码 修改 如 下 。 


<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </1label> 
<select name="day" id="day" multiple data-native-menu="false"> 
<optgroup label=" 工 作 日 "> 
<option valu mon"> 星 期 一 </option> 
<option value="tue"> 星 期 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value="fri"> 星 期 五 </option> 
</optgroup> 
<optgroup label=" 休 息 日 "> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</optgroup> 
</select> 
</fieldset> 
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模拟 器 中 预览 选择 菜单 时 的 效果 如 图 18-14 所 示 。 选 择 完 成 后 ， 即 可 看 到 多 个 菜单 项 被 
选择 ， 如 图 18-15 所 示 。 


日 选择 多 个 值 日 时 间 : 


选择 多 个 值 日 时 间 : 





信和 日 星期 一 ,星期 三 ,星期六 :©@| 








18-14 ”多 个 菜单 选项 效果 图 18-15 多 个 菜单 选项 被 选择 后 的 效果 
8. 翻转 波动 开关 
设置 <input type="checkbox"> 标 签 的 data-role 为 "flipswitch" 时 ， 可 以 创建 翻转 波动 开关 ， 
代码 如 下 。 


<form> 

<label for="switch"> 切 换 开 关 : </1abel> 

<input type="checkbox" data-role="flipswitch" name="switch" id="switch"> 
</form> 


模拟 器 中 预览 效果 如 图 18-16 所 示 。 
同时 ， 用 户 还 可 以 使 用 "checked" 属 性 来 设置 默认 的 选项 ， 代 码 如 下 。 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
checked> 


修改 后 预览 效果 如 图 18-17 所 示 。 
默认 情况 下 ， 开 关切 换 的 文本 为 "On" 和 "Off'。 可 以 使 用 data-on-text 和 data-off-text 属性 
来 修改 ， 代 码 如 下 。 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
data-on-text=" 打 开 " data-off-text=" 关 闭 "> 


修改 后 预览 效果 如 图 18-18 所 示 。 


切换 开关 : 切换 开关 : 切换 开关 : 


EN ) 和 


图 18-16 开关 的 默认 效果 图 18-17 修改 默认 选项 后 的 效果 图 18-18 ”修改 切换 开关 文本 后 的 效果 


二 
售 338 


18.1.2 ”按钮 和 组 按钮 


使 用 方法 和 技巧 。 


可 用 性 ， 推 荐 在 页 面 间 进行 链接 时 ， 使 用 第 3 种 方法 ; 在 表单 提交 时 ， 用 第 1 种 或 第 2 种 
方法 。 


并 排 显示 两 个 或 多 个 按钮 ， 可 以 通过 设置 data-inline="true" 来 完成 ， 代 码 如 下 。 






a 


前 面 简单 介绍 过 表单 按钮 ， 由 于 按钮 和 按钮 组 功能 变化 比较 大 ， 本 节 将 详细 讲述 它们 的 


在 jQuery Mobile 中 ， 创 建 按钮 的 方法 包括 以 下 3 种 。 

e@ ”使 用 <button> 标 签 创建 普通 按钮 ， 代 码 如 下 。 
<button> 按 钮 </button> 

e@ ”使 用 <input> 标 签 创建 表单 按钮 ， 代 码 如 下 。 
<input type="button" value=" 按 钮 "> 

@ ”使 用 data-role="button" 属 性 创建 链接 按钮 ， 代 码 如 下 。 


<a href="#" data-role="button"> 按 钮 </a> 


在 jQuery Mobile 中 ， 按 钮 的 样式 会 被 自动 添加 ， 为 了 让 按钮 在 移动 设备 上 更 具 吸 引力 和 
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默认 情况 下 ， 按 钮 占 满 整个 屏幕 宽度 。 如 果 想 要 一 个 仅 与 内 容 一 样 宽 的 按钮 ， 或 者 需要 


<a href="#pagetwo" data-role="button" data-inline="true"> 下 一 页 </a> 


下 面 通过 一 个 案例 来 区 别 默认 按钮 和 设置 后 的 按钮 ， 代 码 如 下 。 
【 例 18.4】( 实 例文 件 ，ch18\18.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
Lm"></acript> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<hl1> 按 钮 的 区 别 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 普 通 / 默认 按钮 :</p> 
<a href="#second" data-role="button"> 下 一 页 </a> 
<p> 设 置 后 的 按钮 :</p> 
<a href="#second" data-inline="true"> 下 一 页 </a> 
<a href="#first" data-inline="true"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
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<h1>2 种 按钮 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-19 所 示 。 





按钮 的 区 别 
普通 /默认 按钮: 
下 一 页 
设置 后 的 按钮: 
下 一 页 上 一 页 
2 种 按钮 


图 18-19 不 同 的 按钮 效果 


jQuery Mobile 提供 了 一 个 简单 的 方法 将 按钮 组 合 在 一 起 。 使 用 data-role="controlgroup" 属 
性 即 可 通过 按钮 组 来 组 合 按钮 ， 同 时 使 用 data-type="horizontallvertical" 属 性 来 设置 按钮 的 排列 
方式 是 水 平 还 是 垂直 。 

【 例 18.5】( 实 例文 件 ，ch18\18.5.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
mn/acrApt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 组 按钮 的 排列 </h1> 
</div> 
<div data-role="content" class="content"> 
<div data-role="controlgroup" data-type="horizontal"> 
<p> 水 平 排列 的 按钮 : </p> 
<a href="#" data-role="button"> 按 钮 a</a> 
<a href="#" data-role="button"> 按 钮 b</a> 
<a href="#" data-role="button"> 按 钮 c</a> 
</div><br> 
<div data-role="controlgroup" data-type="vertical™" 
<p> 重 直 排列 的 按钮 :</p> 
<a href="#" data-role="button"> 按 钮 a</a> 
<a href="#" data-role="button"> 按 钮 pb </a> 


<a href="#" data-role="button"> 按 钮 c</a> 


</div> 
</div> 


<div data-role="footer"> 


<h1>2 种 排列 方式 </h1> 


</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-20 所 示 。 


18.1.3 ”按钮 图 标 


jQuery Mobile 提供 了 


水 平 排列 的 按钮 ; 


按钮 a ”按钮 b 


垂直 排列 的 按钮 ; 


图 18-20 不 同 排列 方式 的 按钮 组 


组 按钮 的 排列 


按钮 c 


按钮 a 
按钮 b 


按钮 


按钮 图 标 ， 常 用 的 图 标 样式 如 表 18-1 所 示 。 


- 套 丰 富 多 彩 的 按钮 图 标 ， 用 户 只 需要 使 用 data-icon 属性 即 可 添加 






































表 18-1 常用 的 按钮 图 标 样式 
图 标 参数 外 观 样式 说 明 

data-icon="arrow-l" = 左 箭头 
data-icon="arrow-r" 区 右 箭 头 
data-icon="arrow-u" ss 上 箭头 
data-icon="arrow-d" ee 下 箭头 
data-icon="info" se 言 息 
data-icon= Plus” 加 号 
data-icon="minus" 2 减 号 
data-icon="check" es 复 选 
data-icon="refresh" si 重新 整理 
data-icon="delete”" a 删除 
data-icon="forward" ss 前 进 
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续 表 
图 标 参 数 外 观 样式 说 明 

data-icon="back" a 后 退 
data-icon="star" se 星 形 
data-icon="audio" oat 扬声器 
data-icon="lock" sie 挂 锁 
data-icon="search" 换 二 搜索 
data-icon="alert" ed 警告 
data-icon="grid" 网 格 
data-icon="home" ey 首页 








例如 以 下 示例 代码 : 


href="#" data-role="button"” data-icon="lock"> 挂 锁 </a> 
data-role="button" data-icon="check"> 复 选 </a> 
data-role="button"” data-icon="refresh"> 重 新 整理 </a> 
<a href="#" data-role="button" data-icon="delete"> 删 除 </a> 


模拟 器 中 预览 效果 如 图 18-21 所 示 。 





挂 锁 
复 选 
重新 整理 


图 18-21 按钮 图 标 效果 
细心 的 读者 会 发 现 ， 按 钮 上 的 图 标 默认 情况 下 会 出 现在 按钮 的 左边 。 如 果 需 要 设置 图 标 
的 位 置 ， 可 以 通过 设置 data-iconpos 属性 来 指定 位 置 ， 包 括 top( 顶 部 )、right( 右 侧 ) 和 
bottom( 底 部 )。 例 如 以 下 示例 代码 : 


<a href="#" data-role="button" data-icon="refresh"> 重 新 整理 </a> 
<a href="#" data-role="button" data-icon="refresh" data-iconpos="top"> 重 新 整 


理 </a> 
<a href="#" data-role="button" data-icon="refresh" data-iconpos="right"> 重 
新 整理 </a> 
<a href="#" data-role="button" data-icon="refresh" data-iconpos="bottom"> 重 
新 整理 </a> 
模拟 器 中 预览 效果 如 图 18-22 所 示 。 

pr 如 果 不 想 让 按钮 上 出 现 文字 ， 可 以 将 data-iconpos 属性 设置 为 notext， 这 样 只 会 


汇 。 显示 按钮 ， 而 没有 文字 .。 


图 18-22 设置 图 标的 位 置 


18.1.4 ” 弹 窗 


弹 窗 是 一 个 非常 流行 的 对 话 框 ， 弹 窗 可 以 覆盖 在 页 面 上 展示 。 弹 窗 可 用 于 显示 一 段 文 
本 、 图 片 、 地 图 或 其 他 内 容 。 创 建 一 个 弹 窗 ， 需 要 使 用 <a> 和 <div> 标 签 。 在 <a> 标 签 内 添加 
data-rel="popup" 属 性 ，<div> 标 签 内 添加 data-role="popup" 属 性 。 然 后 为 <div> 设 置 id， 设 置 
<a> 的 href 值 为 <div> 指 定 的 i4， 其 中 <div> 中 的 内 容 为 弹 窗 显示 的 内 容 ， 代 码 如 下 。 


<a href="#firstpp" data-rel="popup"> 显 示 弹 窗 </a> 
<div data-role="popup" id="firstpp"> 
<p> 这 是 弹出 窗口 显示 的 内 容 </p> 


</div> 


模拟 器 中 预览 效果 如 图 18-23 所 示 。 单 击 【 显 示 弹 窗 】 即 可 显示 弹出 窗口 的 内 容 。 





星 示 弹 窗 ”| 这 是 弹出 窗口 显示 的 内 容 | 
图 18-23 ” 弹 窗 效果 


他 ” <qiv> 弹 窗 与 单 击 的 <a> 链 接 必须 在 同一 个 页 面 上 。 
注 
fs 
默认 情况 下 ， 单 击 弹 窗 之 外 的 区 域 或 按 Esc 键 即 可 关闭 弹 窗 。 用 户 也 可 以 在 弹 窗 上 添加 
关闭 按钮 ， 只 需要 设置 属性 data-rel="back" 即 可 ， 结 果 如 图 18-24 所 示 。 


© 
这 是 弹出 窗口 显示 的 内 容 


18-24 ” 带 关闭 按钮 的 弹 窗 效果 
还 可 以 在 弹 窗 中 显示 图 片 ， 代 码 如 下 。 


<div id="pageone" data-role="content" class="content" > 


<p> 单 击 下 面 的 小 图 片 </p> 
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<a href="#firstpp" data-rel="popup"” > 
<img src="123.jpeg”" style="width:200px;"></a> 
<div data-role="popup" id="firstpp"> 
<p> 这 是 我 的 图 片 ! </p> 
</a><img src="123.jpeg" style="width:500px;height:500px;" > 
</div> 
</div> 


模拟 器 中 预览 效果 如 图 18-25 所 示 。 单 击 图 片 ， 即 可 弹出 如 图 18-26 所 示 的 图 片 弹 窗 。 





这 是 我 的 匡 片 1 


单 击 下 面 的 下 图 片 





图 18-25 ”模拟 器 中 预览 效果 图 18-26 图 片 弹 窗 效 果 


18.2 列 表 


和 计算 机 相 比 ， 移 动 设备 屏幕 比较 小 ， 所 以 常常 以 列表 的 形式 显示 数据 。 本 节 将 学 习 列 
表 的 使 用 方法 和 技巧 。 


18.2.1 列表 视图 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 ， 包 括 有 序列 表 <ol> 和 无 序列 表 <ul>。 
列表 视图 是 jQuery Mobile 中 功能 强大 的 一 个 特性 ， 使 标准 的 无 序 或 有 序列 表 应 用 更 广泛 。 
列表 的 使 用 方法 非常 简单 ， 只 需要 在 <ul> 或 <ol> 标 签 中 添加 属性 data-role="listview"。 每 
个 项 目 (<li>) 中 可 以 添加 链接 。 下 面 通过 一 个 案例 来 学 习 。 
【 例 18.6】( 实 例文 件 : ch18\18.6.html) 


<1DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=]1"> 
“Link rel="stylesheet 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
1.4.5.min.js"></script> 

</head> 








<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 列 表 视 图 </h1> 
</div> 
<div data-role="content" class="content"> 
<h2> 有 序列 表 : </h2> 
<ol data-role="listview"> 
<1li><a href="#"> 香 燕 </a></1i> 
<1i><a href="#"> 桶 子 </a></1i> 
<li><a href="#"> 苹 果 </a></1i> 
</o1> 
<h2> 无 序列 表 : </h2> 
<ul data-role="listview"> 
<1li><a href="#"> 芹 菜 </a></1i> 
<1i><a href="#"> 韭 菜 </a></1i> 
<1i><a href="#"> 菠 菜 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="footer"> 
<h1> 有 序列 表 和 无 序列 表 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-27 所 示 。 








列 到 视图 

有 序列 表 : 

1 如 本 © 
2. 柱子 © 
3. 莉 果 © 
无 序列 表 

be © 
ER © 
Ea © 


18-27 ”有 序列 表 和 无 序列 表 


en 默认 情况 下 ， 列 表 项 的 链接 会 自动 变 成 一 个 按钮 ， 此 时 不 需要 再 使 用 data- 
慌 ”role="button" 属 性 。 


从 结果 中 可 以 看 出 ， 列 表 样 式 中 没有 边缘 和 圆 角 效果 ， 这 里 可 以 通过 设置 属性 data- 
inset="true" 来 完成 ， 代 码 如 下 。 


<ul data-role="listview" data-inset="true"> 
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上 面 案例 的 部 分 代码 修改 如 下 。 


<div data-role="content" class="content"> 
<h2> 标 准 列表 样式 : </h2> 
<ol data-role="listview"> 
<1i><a href="#"> 香 药 </a></1i> 
<1i><a href="#"> 橘 子 </a></1i> 
<1i><a href="#"> 蔷 果 </a></1i> 
</o1> 
<h2> 添 加 data-inset="true" 属 性 后 的 样式 : </h2> 
<ul data-role="listview" data-inset="true"> 
<1i><a href="#"> 上 芹菜 </a></1i> 
<1i><a href="#"> 韭 菜 </a></1i> 
<1i><a href="#"> 菠 菜 </a></1i> 

















</ul> 
</div> 
模拟 器 中 预览 效果 如 图 18-28 所 示 。 
标准 列表 样式 : 
1 香 和 © 
2. 柱子 © 
3. 二 果 © 
添加 data-inset="true" 属 性 后 的 样式 : 
F 荣 © 
不 © 
亚 荣 © 


图 18-28 ”有 边缘 和 圆 角 的 列表 效果 


如 果 列 表 项 比较 多 ， 可 以 使 用 列表 分 割 项 对 列表 进行 分 组 操作 ， 这 样 使 列表 看 起 来 更 整 
齐 。 通 过 在 列表 项 <1li> 标 签 中 添加 data-role="list-divider" 属性 即 可 指定 列表 分 割 ， 例 如 以 下 代 
码 所 示 。 


<ul data-role="listview"> 

<li data-role="list-divider"> 蔬 菜 </1i> 
<1i><a href="#"> 芹 菜 </a></1i> 
<1i><a href="#"> 韭 菜 </a></1i> 

<li data-role="list-divider"> 水 果 </1i> 
<1i><a href="#"> 芋 果 </a></1i> 
<1i><a href="#"> 橘 子 </a></1i> 

<1i data-role="1list-divider"> 乳 制品 </1i> 
<1i><a href="#"> 酸 奶 </a></1i> 
<1i><a href="#"> 奶 酪 </a></1i> 

</ul> 


模拟 器 中 预览 效果 如 图 18-29 所 示 。 


G3 


| 






蔬菜 

所 菜 © 

ER © 到 
水 果 所 
划 果 © 
信子 © & 
六 组 
© 件 
奶酪 © 


图 18-29 对 项 目 进行 分 割 后 的 效果 


如 果 项 目 列表 是 一 个 按 字 母 顺序 排列 的 列表 ， 通 过 添加 data-autodividers="true" 属 性 ， 可 
以 自动 生成 项 目的 分 割 ， 代 码 如 下 。 


<ul data-role="listview" data-autodividers="true"> 
<1i><a href="#">Avocado</a></1i> 
<li><a href="#"> Apricot</a></1i> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Bramley</a></1i> 
<li><a href="#"> Cherry </a></1i> 
</ul> 


模拟 器 中 预览 效果 如 图 18-30 所 示 。 从 结果 中 可 以 看 出 ， 创 建 的 分 隔 文本 是 列表 项 文本 
的 第 一 个 大 写字 母 。 


Avocado © 
Apricot © 
B 

Banana © 
Bramley © 
C 

cherry © 


18-30 ”自动 生成 分 割 后 的 效果 


18.2.2 ”列表 内 容 


在 列表 内 容 中 ， 既 可 以 添加 图 片 和 说 明 ， 也 可 以 添加 计数 泡 泡 ， 同 时 还 能 拆 分 按钮 和 列 
表 的 链接 。 
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1. 加 入 图 片 和 说 明 
前 面 的 案例 中 ， 列 表 项 目前 没有 图 片 或 说 明 














如 下 。 


> 


<a href="#"> 
<img src="124.jpg"> 


<h3> 香 


萝 </h3> 


<p> 香 燕 的 原 产 地 是 东南 亚 </p> 


</a> 
AEE 


模拟 器 中 预览 效果 如 图 18-31 所 示 。 


Ns 


香 燕 的 原 产地 是 东南 亚 


， 下 面 来 讲述 如 何 添 加 图 片 和 说 明 ， 代 码 


图 18-31 加 入 图 片 和 说 明 


2. 计 入 计数 泡 泡 
计数 泡 泡 主要 是 在 列表 中 显示 数字 时 使 用 ， 只 需要 在 <li> 标 签 内 加 入 以 下 标签 即 可 。 


<span class="ui-1i-count"> 数 字 </span> 


例如 下 面 的 例子 : 


ek 


<a href="#"> 
<img src="124.jpg"> 


<h3> 香 


燕 </h3> 


<p> 香 燕 的 原 产地 是 东南 亚 </p> 


<span class="ui-li-count">111</span> 


</a> 
</1i> 


模拟 器 中 预览 效果 如 图 18-32 所 示 。 


香 莱 的 原 产地 是 东南 亚 


11| © 


图 18-32 加 入 计数 泡 泡 


3. 拆 分 按钮 和 列表 的 链接 
默认 情况 下 ， 单 击 列表 项 或 按钮 ， 都 是 转向 同一 个 链接 。 也 可 以 拆 分 按钮 和 列表 项 的 链 


接 ， 这 样 单 击 按钮 和 列表 项 时 ， 会 转向 不 同 的 链接 。 设 置 方法 比较 简单 ， 只 需要 在 <1i> 标 签 内 
加 入 两 组 <a> 标 签 即 可 。 





例如 以 下 代码 : 
> 

<a href="122.html"> 

<img src="124.jpg"> 

<h3> 香 礁 </h3> 

<P> 香 燕 的 原 产地 是 东南 亚 </P> 

</a> 

<a href="123.html data-icon="star"></a> 
i 


模拟 器 中 预览 效果 如 图 18-33 所 示 。 


sx 


香菜 的 原 产地 是 东南 亚 


图 18-33 ” 拆 分 按钮 和 列表 的 链接 
18.2.3 ”列表 过 滤 


在 jQuery Mobile 中 ， 用 户 可 以 对 列表 项 目 进行 搜索 过 滤 。 添 加 过 滤 效 果 的 思路 如 下 。 
(1) 创建 一 个 表单 ， 并 添加 类 "ui-filterable"， 该 类 的 作用 是 自动 调整 搜索 字段 与 过 滤 元 素 
的 外 边 距 ， 代 码 如 下 。 


<form class="ui-filterable"> 
</form> 


(2) 在 <form> 标 签 内 创建 一 个 <input> 标 签 ， 并 添加 data-type="search" 属 性 ， 并 指定 id， 
从 而 创建 基本 的 搜索 字段 ， 代 码 如 下 。 


<form class="ui-filterable"> 
<input id="myFilter" data-type="search"> 
</form> 


(3) 为 过 滤 的 列表 添加 data-input 属性 ， 该 值 为 <input> 标 签 的 4， 代 码 如 下 。 


<ul data-role="listview" data-filter="true" data-input="#myFilter"> 


下 面 通过 一 个 案例 来 理解 列表 是 如 何 过 滤 的 。 
【 例 18.7】( 实 例文 件 ，ch18\18.7.html) 


<1DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 

LS min ja"></acript> 

</head> 
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<body> 
<div data-role="page" id="first"> 
<div data-role="content" class="content"> 
<h2> 进 货 商 联系 表 </h2> 
<form> 
<input id="myFilter" data-type="search"> 
</form> 
<ul data-role="listview" data-filter="true" data-input="#myFilter"> 
<1i><a href="#"> 张 小 名 </a></1i> 
<1i><a href="#"> 刘 名 园 </a></1i> 
<1i><a href="#"> 刘 鳃 鹏 </a></1i> 
<1i><a href="#"> 张 鹏 举 </a></1i> 
<1i><a href="#"> 张 鹏 远 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-34 所 示 。 输 入 需要 过 滤 的 关键 字 ， 如 这 里 搜索 姓 张 的 进货 
商 ， 结 果 如 图 18-35 所 示 。 








进货 商 联系 表 

进货 商 联系 表 

张 小 名 © 

i EE le 

Rs © 张 小 名 © 

了 张 肌 举 © 张 器 举 © 

张 轴 远 © 张 吕 远 © 
图 18-34 ”程序 预览 效果 图 18-35 ”列表 过 滤 后 的 效果 


pr 如 果 需 要 在 搜索 输入 框 内 添加 提示 信息 ， 可 以 通过 设置 placeholder 属性 来 完成 ， 
代码 如 下 。 


<input id="myFilter" data-type="search"” placeholder=" 请 输入 联系 人 的 姓 "> 


18.3 ”面板 和 可 折 难 块 


在 jQuery Mobile 中 ， 可 以 通过 面板 或 可 折 登 块 来 隐藏 或 显示 指定 的 内 容 。 本 节 将 重点 学 
习 面 板 和 可 折合 块 的 使 用 方法 和 技巧 。 


18.3.1 面板 


jQuery Mobile 中 可 以 添加 面板 ， 面 板 会 在 屏幕 上 从 左 至 右 滑 出 。 通 过 为 <div> 标 签 添加 
data-role="panel" 属 性 来 创建 面板 。 有 具体 思路 如 下 。 
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(1) 通过 <div> 标 签 定义 面板 的 内 容 并 定义 id 属性 ， 代 码 如 下 。 


<div data-role="panel" id="myPanel"> 


<h2> 长 恨 歌 </h2> 
<p> 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 黛 无 颜色 。</p> 
</div> 
今 ”定义 的 面板 内 容 必 须 置 于 头 部 、 内 容 和 底部 组 成 的 页 面 之 前 或 之 后 。 
注 
意 
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(2) 要 访问 面板 ， 需 要 创建 一 个 指向 面板 <div> 的 链接 ， 单 击 该 链接 即 可 打开 面板 ， 代 码 如 下 。 


<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 


【 例 18.8】( 实 例文 件 ，ch18\18.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
L450min He"></script> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="panel" id="myPanel"> 
<h2> 长 恨 歌 </h2> 
<p> 天 生 丽质 难 自 弃 ， 一 朝 选 在 君王 人 出。 回眸 一 笑 百 媚 生 ， 六 宫 粉 伏 无 颜色 。</p> 
</div> 
<div data-role="header"> 
<h1> 使 用 面板 </h1> 
</div> 
<div data-role="content" class="content"> 
<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-36 所 示 。 单 击 【 最 喜欢 的 诗句 】 链 接 ， 即 可 打开 面板 ， 结 果 如 
图 18-37 所 示 。 





IGG 


使 用 面板 
长 恨 歌 
天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 
最 喜欢 的 诗句 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 第 无 
颜色 。 
图 18-36 程序 预览 效果 图 18-37 打开 面板 
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面板 的 展示 方式 由 属性 data-display 来 控制 ， 分 为 以 下 3 种 。 

@。 data-display="reveal": 面板 的 展示 方式 为 从 左 至 右 滑 出 ， 这 是 面板 展示 方式 的 默 
认 值 。 

@ data-display="overlay": 在 内 容 上 显示 面板 。 

@ data-display="push": 同时 推动 面板 和 页 面 。 

这 3 种 面板 展示 方式 的 代码 如 下 。 


<div data-role="panel" id="overlayPanel" data-display="overlay"> 
<div data-role="panel" id="revealPanel" data-display="reveal"> 
<div data-role="panel" id="pushPanel" data-display="push"> 


默认 情况 下 ， 面 板 会 显示 在 屏幕 的 左 侧 。 如 果 想 让 面板 出 现在 屏幕 的 右 侧 ， 可 以 指定 
data-position="right” 属性 。 


<div data-role="panel" id="myPanel" data-position="right"> 


默认 情况 下 ， 面 板 是 随 着 页 面 一 起 滚动 的 。 如 果 需 要 实现 面板 内 容 固定 不 随 页 面 滚动 而 
滚动 ， 可 以 在 面板 添加 the data-position-fixed="true" 属 性 ， 代 码 如 下 。 


<div data-role="panel" id="myPanel" data-position-fixed="true"> 


18.3.2 ”可 折叠 块 


通过 可 折 姜 块 ， 用 户 可 以 隐藏 或 显示 指定 的 内 容 ， 这 对 于 存储 部 分 的 信息 很 有 用 。 
创建 可 折 靶 块 的 方法 比较 简单 ， 只 需要 在 <div> 标 签 内 添加 data-role="collapsible" 属性 即 
可 ， 添 加 标题 标签 为 hl 一 h6， 后 面 即 可 添加 隐藏 的 信息 。 


<div data-role="collapsible"> 
<h1> 折 县 块 的 标题 </h1> 
<p> 可 折合 的 具体 内 容 。</p> 


</div> 


【 例 18.9】( 实 例文 件 ，ch18\18.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
L445.min. 3"></script> 

</head> 
<body> 
<div data-role="first"> 

<div data-role="header"> 

<h1> 可 折 登 块 </h1> 

</div> 

<div data-role="content" class="content"> 

<div data-role="collapsible"> 


<h1> 最 喜欢 的 水 果 </h1> 
<p> 香 蒋 、 橘 子 、 苹 果 </p> 
</div> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-38 所 示 。 单 击 【 最 喜欢 的 水 果 】 按 钮 ， 即 可 打开 可 折 伙 块 ， 
结果 如 图 18-39 所 示 。 


二 可 折 鸡 块 
全 最 喜欢 的 水 果 IO mm 
香蕉 、 桶 子 、 苹 果 
图 18-38 程序 预览 效果 图 18-39 打开 可 折 丢 块 


pa 默认 情况 下 ， 内 容 是 被 折 枉 起 来 的 。 如 需 在 页 面 加载 时 展开 内 容 ， 添 加 data- 
collapsed="false" 属 性 即 可 ， 代 码 如 下 。 
<div data-role="collapsible" data-collapsed="false"> 
<h1> 折 营 块 的 标题 </h1> 
<p> 这 里 显示 的 内 容 是 展开 的 </p> 


</div> 


可 折 营 块 是 可 以 谋 套 的 ， 例 如 以 下 代码 : 


<div data-role="collapsible"> 
<h1> 全 部 智能 商品 </h1> 

<div data-role="collapsible"> 
<h1> 智 能 家 居 </h1> 
<p> 智 能 办 公 、 智 能 厨 电 和 智能 网 络 </p> 


</div> 
</div> 


模拟 器 中 预览 效果 如 图 18-40 所 示 。 
日 全 部 智能 商品 


手机 及 配件 
智能 穿 二 





日 智能 家 居 





秆 能 办 公 、 箭 能 厨 电 和 辕 能 网 络 


18-40 ”程序 预览 效果 


sl 汉 息 


py HB 
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18.4 导 航 条 


导航 条 通常 位 于 页 面 的 头 部 或 尾部 ， 主 要 作用 是 便于 用 户 快速 访问 需要 的 页 面 。 本 节 将 
重点 学 习 导 航 条 的 使 用 方法 和 技巧 。 

在 jQuery Mobile 中 ， 使 用 data-role="navbar" 属性 来 定义 导航 栏 。 需 要 特别 注意 的 是 ， 
导航 栏 中 的 链接 将 自动 变 成 按钮 ， 不 需要 使 用 data-role="button" 属 性 。 

例如 以 下 代码 : 


<div data-role="header"> 
<h1> 鸿 锥 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href="#"> 主 页 </a></1i> 
<1i><a href="#"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 





</ul> 
</div> 
</div> 
模拟 器 中 预览 效果 如 图 18-41 所 示 。 
鸿 锥 网 购 平台 
团购 搜索 商品 


图 18-41 程序 预览 效果 
通过 前 面 章节 的 学 习 ， 还 可 以 为 导航 添加 按钮 图 标 ， 例 如 以 上 代码 修改 如 下 : 


<div data-role="header"> 
<h1> 鸿 锥 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home"> 主 页 </a></1i> 
<li><a href="#" data-icon="arrow-d"> 团 购 </a></1i> 
<li><a href="#" data-icon="search"> 搜 索 商品 </a></1i> 


</ul> 
</div> 
</div> 
模拟 器 中 预览 效果 如 图 18-42 所 示 。 
鸿 的 网 购 平台 
QO © @ 
主页 四 搜索 商品 


图 18-42 程序 预览 效果 
细心 的 读者 会 发 现 ， 导 航 按钮 的 图 标 默认 位 置 是 位 于 文字 的 上 方 ， 这 个 普通 的 按钮 图 片 


0 


是 不 一 样 的 。 如 果 需 要 修改 导航 按钮 图 标的 位 置 ， 可 以 通过 设置 data-iconpos 属性 来 指定 位 
置 ， 包 括 left( 左 侧 )、right( 右 侧 ) 和 bottom( 底 部 )。 
例如 ， 下 面 修改 导航 按钮 图 标的 位 置 为 文本 的 左 侧 ， 代 码 如 下 。 


<div data-role="header"> 
<h1> 鸿 钥 网 购 平台 </h1> 
<div data-role="navbar" data-iconpos="left"> 
<ul> 
<li><a href="#" data-icon="home” > 主页 </a></1i> 
<li><a href="#" data-icon="arrow-d” > 团购 </a></1i> 
<li><a href="#"” data-icon="search"> 搜 索 商 品 </a></1i> 
</ul> 
</div> 
</div> 


模拟 器 中 预览 效果 如 图 18-43 所 示 。 
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图 18-43 ”程序 预览 效果 
重地 和 设置 普通 按钮 图 标 位 置 不 同 的 是 ， 这 里 data-iconpos="left" 属 性 只 能 添加 到 
放生 <div> 标 签 中 ， 而 不 能 添加 到 <li> 标 签 中 ， 否 则 是 无 效 的 ， 读 者 可 以 自行 检测 。 


罗 A 


默认 情况 下 ， 当 单 击 导航 按钮 时 ， 按 钮 的 样式 会 发 生变 换 ， 例 如 ， 这 里 单 击 【 搜 索 商 
品 】 导 航 按钮 ， 发 现 按钮 的 底 纹 颜 色 变 成 了 蓝 色 ， 如 图 18-44 所 示 。 


鸿 锥 网 购 平台 


o = 0o = Elm 


18-44 ”导航 按钮 的 样式 变化 


如 果 用 户 想 取消 上 面 的 样式 变化 ， 可 以 添加 class="ui-btn-active" 属 性 即 可 ， 例 如 以 下 
代码 : 


<li><a href="#anylink" class="ui-btn-active"> 首 页 </a></1i> 


修改 完成 后 ， 再 次 单 击 【首页 】 导 航 按钮 时 ， 样 式 不 会 发 生变 化 。 

对 于 多 个 页 面 的 情况 ， 往 往 用 户 希望 显示 哪个 页 面 ， 对 应 的 导航 按钮 就 处 于 被 选中 状 
态 ， 下 面 通过 一 个 案例 来 讲解 。 

【 例 18.10】( 实 例文 件 ，ch18\18.10.html) 


<!DOCTYPE html> 
<html> 
<head> 
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<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
La:5.minsja"></acript> 

</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 





<hl1> 鸿 秽 购 物 平 台 </h1> 
<div data-role="navbar"> 
<ul> 


<li><a href="#" class="ui-btn-active ui-state-persist"> 主 页 </a></1i> 
<1i><a href="#second"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 首页 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 首 页 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 


<h1> 鸿 外 购 物 平台 </h1> 
<div data-role="navbar"> 
<ul> 


<li><a href="#first"> 主 页 </a></1i> 
<li><a href="#" class="ui-btn-active ui-state-persist"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 团购 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 团 购 页 面 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-45 所 示 。 此 时 默认 显示 首页 的 内 容 ，【 主 页 】 导 航 按钮 处 于 
选中 状态 。 切 换 到 团购 页 面 后 ，【 团 购 】 导 航 按钮 处 于 选中 状态 ， 如 图 18-46 所 示 。 








鸿 饮 购物 平台 鸿 侈 购物 平台 
团购 搜索 商品 主页 团购 搜索 商品 
这 里 是 首页 显示 的 内 容 这 里 是 团购 显示 的 内 容 
首页 团购 页 面 
图 18-45 ”程序 预览 效果 18-46 【团购 】 导 航 按钮 处 于 选中 状态 


18.5 jQuery Mobile 主题 


在 设计 移动 网 站 时 ， 往 往 需要 配置 背景 颜色 、 导 航 颜色 、 布 局 颜色 等 ， 这 些 工作 是 非常 
耗费 时 间 的 。 为 此 ，jQuery Mobile 有 两 种 不 同 的 主题 样式 ， 每 种 主题 颜色 的 按钮 、 导 航 、 内 
容 等 颜色 都 是 配置 好 的 ， 效 果 也 不 相同 。 

这 两 种 主题 分 别 为 a 和 b， 通 过 设置 data-theme 属性 来 引用 主题 a 或 b， 代 码 如 下 。 


<div data-role="page" id="first" data-theme="a"> 
<div data-role="page" id="first" data-theme="b"> 
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1. 主题 a 


页 面 为 灰色 背景 、 黑 色 文 字 ; 头 部 与 底部 均 为 灰色 背景 、 黑 色 文字 ; 按钮 为 灰色 背景 、 
黑色 文字 ; 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ， input 输入 框 中 placeholder 属性 值 为 浅 
灰色 ，value 值 为 黑色 。 

下 面 通过 一 个 案例 来 讲解 主题 a 的 样式 效果 。 

【 例 18.11】( 实 例文 件 : ch18\18.11.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
L455.min. Ja"></script> 

</head> 
<body> 
<div data-role="page" id="first" data-theme="a"> 

<div data-role="header"> 

<h1> 古 诗 鉴赏 </h1> 
</div> 





<div data-role="content " class="content"> 
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<p> 秋 风 起 今 白云 K， 草 木 黄 落 今 雁 南 归 。 兰 有 秀 今 萄 有 芳 ， 怀 佳人 今 不 能 忘 。 泛 楼 和 肌 今 济 汾 河 ， 
横 中 流 今 扬 素 波 。</p> 
<a href="#"> 秋 风 辞 </a> 
<a href="#" class="ui-btn"> 更 多 古诗 </a> 
<p> 唐 诗 :</p> 
<ul data-role="listview" data-autodividers="true" data-inset="true"> 
<1i><a href="#"> 将 进 酒 </a></1i> 
<li><a href="#"> 春 望 </a></1i> 
</ul> 
<label for="fullname"> 请 输入 喜欢 诗 的 名 字 :</label> 
<input type="text" name="fullname" id="fullname" Placeholder=" 诗 词 名 称 . ."> 
<label for="switch"> 切 换 开关 :</label> 
<select name="switch" id="switch" data-role="slider"> 
<option value="on">On</option> 
<option value="off" selected>Off</option> 
</select> 
</div> 





<div data-role="footer"> 
<h1> 经 典 诗歌 </h1> 
</div> 
</div> 
</body> 
</html> 


主题 a 的 样式 效果 如 图 18-47 所 示 。 
2. 主题 b 


页 面 为 黑色 背景 、 白 色 文 字 ; 头 部 与 底部 均 为 黑色 背景 、 白 色 文字 ;按钮 为 白色 文字 、 
木炭 背景 ; 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ， input 输入 框 中 placeholder 属性 值 为 浅 
灰色 、value 属性 值 为 白色 。 

为 了 对 比 主题 a 的 样式 效果 ， 将 上 面 案例 中 的 代码 


<div data-role="page" id="first" data-theme="a"> 


修改 如 下 : 


<div data-role="page" id="first" data-theme="a"> 


主题 b 的 样式 效果 如 图 18-48 所 示 。 

主题 样式 a 和 b 不 仅 可 以 应 用 到 页 面 ， 也 可 以 单独 地 应 用 到 页 面 的 头 部 、 内 容 、 底 部 、 
导航 条 、 按 钮 、 面 板 、 列 表 、 表 单 等 元 素 上 。 

例如 ， 将 主题 样式 b 添加 到 页 面 的 头 部 和 底部 ， 代 码 如 下 。 


<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 


将 主题 样式 b 添加 到 对 话 框 的 头 部 和 底部 ， 代 码 如 下 。 


<div data-role="page" data-dialog="true" id="second"> 
<x<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 
</div> 
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古诗 鉴 和 章 
Wot A 芳 ， 怀 佳人 
秋风 豆 
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店 尘 : 加 
cS 
将 组 
将 进 洒 件 
春 
春 户 
请 恰 入 训 欢 诗 的 名 字 请 内 入 去 欢 诗 的 名 字 
切换 开关 ; 切换 开关 汉 
图 18-47 主题 a 样式 效果 18-48 主题 b 样式 效果 


将 主题 样式 b 添加 到 按钮 上 时 ， 需 要 使 用 class="ui-btn- alb "来 设置 按钮 颜色 为 灰色 或 黑 
色 。 例 如 ， 将 样式 b 的 样式 应 用 到 按钮 上 ， 代 码 如 下 。 


<a href="#" class="ui-btn"> 灰 色 按 钮 (默认 ) </a> 
<a href="#" class="ui-btn ui-btn-b"> 黑 色 按钮 </a> 


预览 效果 如 图 18-49 所 示 。 


灰色 按钮 (默认 ) 


图 18-49 ”按钮 添加 主题 后 的 效果 
在 弹 窗 上 应 用 主题 样式 的 代码 如 下 。 
<div data-role="popup" id="myPopup" data-theme="b"> 
在 头 部 和 底部 的 按钮 上 也 可 以 添加 主题 样式 ， 代 码 如 下 。 


<div data-role="header"> 
<a href="#" class="ui-btn ui-btn-b"> 主 页 </a> 





<h1> 古 诗 欣 赏 </h1> 
<a href="#" class="ui-btn"> 搜 索 </a> 
</div> 


<div data-role="footer"> 
<a href="#" class="ui-btn ui-btn-b"> 上 传 古诗 图 文 </a> 
<a href="#" class="ui-btn"> 名 句 欣 赏 鉴别 </a> 
<a href="#" class="ui-btn ui-btn-b"> 联 系 我 们 </a> 
</div> 
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预览 效果 如 图 18-50 所 示 。 


会 页 古诗 欣赏 按 案 


清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 。 供 问 酒家 何 处 有 ? 牧童 遥 指 可 花 
村 。 


上 传 古诗 图 广 名 句 改 党 稚 别 ”有 电 开 3 





图 18-50” 头 部 和 底部 按钮 添加 主题 样式 后 的 效果 


18.6 高 手 甜 点 


甜点 1: 如 何 制 作 一 个 后 退 按钮 ? 

如 需 创建 后 退 按钮 ， 可 使 用 data-rel="back" 属性 (这 会 忽略 锚 的 href 值 )。 
<a href="#" data-role="button" data-rel="back"> 返 回 </a> 

甜点 2: 如 何在 面板 上 添加 主题 样式 b? 

在 面板 上 添加 主题 样式 的 方法 比较 简单 ， 代 码 如 下 。 

<div data-role="panel" id="myPanel" data-theme="b"> 


面板 添加 主题 样式 b 后 的 效果 如 图 18-51 所 示 。 


单 击 以 下 按钮 打开 面板 . 





图 18-51 面板 添加 主题 样式 后 的 效果 


18.7” 跟 我 练 练 手 


练习 1: 使 用 表单 组 件 制作 一 个 用 户 注 册 表 。 

练习 2: 制作 一 个 页 面 ， 包 含 各 种 按钮 和 按钮 组 ， 并 且 给 按钮 添加 图 标 。 
练习 3: 制作 一 个 包含 弹 窗 的 jQuery Mobile 网 页 。 

练习 4: 制作 一 个 包含 列表 并 实现 列表 过 滤 的 jQuery Mobile 网 页 。 

练习 5: 制作 一 个 包含 面板 和 折 琶 块 的 jQuery Mobile 网 页 。 

练习 6: 制作 一 个 包含 导航 条 的 jQuery Mobile 网 页 。 

练习 7: 制作 一 个 应 用 主题 的 jQuery Mobile 网 页 。 
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19.1 页 面 事 件 


jQuery Mobile 针对 各 个 页 面 生命 周 期 的 事件 可 以 分 为 以 下 几 种 。 

@ ”初始 化 事件 ， 分 别 在 页 面 初始 化 之 前 ， 页 面 创 建 时 和 页 面 初始 化 之 后 触发 的 事件 。 

@ 外 部 页 面 加 载 事 件 : 外 部 页 面 加 载 时 触发 事件 。 

@ 页面 过 渡 事 件 : 页 面 过 渡 时 触发 事件 。 

使 用 jQuery Mobile 事件 的 方法 比较 简单 ， 只 需要 使 用 on() 方 法 指定 要 触发 的 时 间 并 设 定 
事件 处 理 函 数 即 可 ， 语 法 格式 如 下 。 

$ (document) .on (事件 名 称 , 选择 器 , 事件 处 理 函数 ) 


其 中 选择 器 可 选 参 数 ， 如 果 省 略 该 参数 ， 表 示 事 件 应 用 于 整个 页 面 而 不 限定 哪 一 个 组 件 。 
19.1.1 初始 化 事件 


初始 化 事件 发 生 的 时 间 包 括 页 面 初始 化 之 前 、 页 面 创建 时 和 页 面 创建 后 。 下 面 将 详细 介 
绍 初始 化 事件 。 


1. Mobileinit 


当 jQuery Mobile 开始 执行 时 ， 首 先 会 触发 mobileinit 事件 。 如 果 想 更 改 jQuery Mobile 的 
默认 值 时 ， 就 可 以 将 函数 绑 定 到 mobileinit 事件 ， 语 法 格式 如 下 。 


$ (document) .on ("mobileinit", function(){ 
// jQuery 事件 
1D); 
例如 ，jQuery Mobile 开始 执行 任何 操作 时 都 会 使 用 AJAX 的 方式 ， 如 果 不 想 使 用 
AJAX， 可 以 在 mobileinit 事件 中 将 $.mobile .ajaxEnabled 更 改 为 false， 代 码 如 下 。 


$ (document) .on ("mobileinit",function(){ 
$.mobile.ajaxEnabled=false:; 
1); 


这 里 需要 注意 的 是 ， 上 面 的 代码 要 放 在 引用 jquery.mobile.js 之 前 。 
2. jQuery Mobile Initialization 事件 
jQuery Mobile Initialization 事件 主要 包括 pagebeforecreate 事件 、pagecreate 事件 和 


pageinit 事件 ， 它 们 的 区 别 如 下 。 
@ ”pagebeforecreate 事件 : 发 生 在 页 面 DOM 加 载 后 ， 正 在 初始 化 时 ， 语 法 格式 如 下 。 


$ (document) .on ("pagebeforecTreate"， function(){ 


// 程序 语句 



























































1 
@ ”pagecreate 事件 : 发 生 在 页 面 DOM 加 载 完 成 ， 初 始 化 也 完成 时 ， 语 法 格式 如 下 。 





问 刘 


$ (document) .on ("pagecreate",function(){ 


// 程序 语句 





事件 : 发 生 在 页 面 初始 化 完成 以 后 ， 语 法 格式 如 下 。 


$ (document) .on ("pageinit"vfunction()1{ 
// 程序 语句 
]) 7 


下 面 通过 一 个 综合 案例 来 学 习 上 面 的 3 个 事件 触发 的 时 机 。 
【 例 19.1】( 实 例文 件 ，ch19\19.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
L245.min da"></script> 
<script> 
$ (document) .on ("pagebeforecreate", function(){ 
alert ("注意 : pagebeforecreate 事件 开始 触发 ") ; 
1D); 
$ (document) .on ("pagecreate", function(){ 
alert ("注意 : pagecreate 事件 触发 开始 触发 ") ; 
]) 
$ (document) .on ("pageinit",function(){ 
alert ("注意 : pageinit 事件 开始 触发 ") ; 
1); 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 遥 。</p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 人 </h1> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 似 此 星辰 非 昨 夜 ， 为 谁 风 露 立 中 宵 。</p> 
<a href="#first"> 上 一 页 </a> 





® pageinit 
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</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 程序 的 效果 ， 各 个 事件 的 执行 顺序 如 图 19-1 所 示 。3 次 单 击 【确认 】 按 钮 
后 ， 结 果 如 图 19-2 所 示 。 





| C opere Mebie Crstom [Ear] 
localhost 


注意 : pagebeforecreate 事 件 开始 触发 Google ] 
古诗 欣赏 


| 


localhost 几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 退 。 
注意 : pagecreate 事 件 触 发 开始 触发 下 一 页 
确认 


| 


localhost 
注意 : pageinit 事 件 开始 触发 


Catom 00x595 PPE 233 [Ga] [100% 7] 








经 典 诗词 








图 19-1 初始 化 事件 图 19-2 页 面 最 终 效果 


19.1.2 ”外 部 页 面 加 载 事件 


外 部 页 面 加 载 时 ， 最 常见 的 加 载 事 件 如 下 。 
1. pagebeforeload 事件 


pagebeforeload 事件 在 外 部 页 面 加 载 前 触发 ， 语 法 格式 如 下 。 


<script> 

$ (document) .on ("pagebeforeload", function(){ 
alert ("有 外 部 文件 将 要 被 加 载 ) ; 

1D); 

</script> 


2. pageload 事件 
当 页 面 加 载 成 功 时 ， 触 发 pageload 事件 ， 语 法 格式 如 下 。 


<script> 
$ (document) .on ("pageload", function(event,data){ 


G6 


alert ("pageload 事件 触发 ! \nURL: " + data.url); 
和 你 
</script> 


pageload 事件 的 函数 参数 含义 如 下 。 

@ event: 任何 jQuery 的 事件 属性 ， 如 event.type、 eventpageX 和 target 等 。 
@ data: 包含 以 下 属性 。 

url: 页 面 的 URL 地址， 是 字符 串 类 型 。 

absUrl: 绝对 地 址 ， 是 字符 串 类 型 。 

dataUrl: 地 址 栏 URL， 是 字符 串 类 型 。 

options: $.mobile.loadPage() 指 定 的 选项 ， 是 对 象 类 型 。 

xhr: XMLHttpRequest 对 象 ， 是 对 象 类 型 。 

textStatus: 对 象 状 态 或 空 值 ， 返 回 状态 。 


3. pageloadfailed 事件 


如 果 页 面 载 入 失败 ， 触 发 pageloadfailed 事件 ， 默 认 显示 "Error Loading Page" 消息 ， 语 
法 格式 如 下 。 


$ (document) .on ("pageloadfailed", function(event,data){ 
alert ("抱歉 ， 被 请 求 页面 不 存在 。") ; 

1); 

</script> 


下 面 通过 一 个 例子 来 理解 上 述 事 件 触 发 时 机 。 
【 例 19.2】( 实 例文 件 ，ch19\19.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
LS mn je"></acript> 
<script> 
$ (document) .on ("pageload", function (event,data){ 
alert ("pageload 事件 触发 ! \nURL : "+ data. url); 
1D); 
$ (document) .on ("pageloadfailed",function(){ 

alert ("抱歉 ， 被 请 求 页面 不 存在 。") ; 
其 六 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 

<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 


ee 多 


庆 灿 alqoN enDf_ 机 6 “和 
py A 





APP 和 移动 网 站 开发 


案例 课堂 由 一 





<p> 众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 相 看 两 不 厌 ， 只 有 敬 亭 山 。</p> 
<a href="123.html"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 19-3 所 示 。 单 击 【 下 一 页 】 按 钮 ， 结 果 如 图 19-4 所 示 。 








古诗 欣赏 古诗 欣赏 


众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 众 鸟 高 飞 尽 . 孤 云 独 去 闲 - 





相 看 两 不 厌 , 只 有 敬 亭 山 。 localhost 
抱 款 ， 被 请 求 页 面 不 存在 。 
ee 确认 
经 典 诗词 
图 19-3 程序 预览 效果 图 19-4 触发 pageloadfailed 事件 


19.1.3 页面 过 渡 事 件 


在 jQuery Mobile 中 ， 在 当前 页 面 过 渡 到 下 一 页 时 ， 会 触发 以 下 几 个 事件 。 
@ ”pagebeforeshow 事件 : 在 当前 页 面 触发 ， 在 过 渡 动画 开始 前 。 

@ ”pageshow 事件 : 在 当前 页 面 触发 ， 在 过 渡 动 画 完 成 后 。 

@ ”pagebeforehide 事件 : 在 下 一 页 触发 ， 在 过 渡 动 画 开始 前 。 

。 ”pagehide 事件 ， 在 下 一 页 触发 ， 过 渡 动画 完成 后 。 

下 面 通过 一 个 案例 来 学 习 页 面 过 渡 事 件 的 触发 时 机 。 

【 例 19.3】( 实 例文 件 ，ch19\19.3.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-— 
L124.5.min. js"S</script> 
<script> 
$ (document) .on ("pagebeforeshow","#second", function(){ 

alert ("触发 pagebeforeshow 事件 ， 下 一 页 即将 显示 "); 
Ds 
$ (document) .on ("pageshow","#second", function(){ 


alert ("触发 pageshow 事件 ， 现 在 显示 下 一 页 "); 
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$ (document) .on ("pagebeforehide","#second",function(){ 


alert ("触发 pagebeforehide 事件 ， 下 一 页 即将 隐藏 ") ; 
]) 
$ (document) .on ("pagehide","#second",function(){ 
alert ("触发 pagehide 事件 ， 现 在 隐藏 下 一 页 ") ; 
}) ?</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 相 看 两 不 大 ， 只 有 黎 享 山 。</p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 众 岛 高 飞 尽 ， 孤 云 独 去 闲 。 相 看 两 不 天， 只 有 冤 享 山 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 19-5 所 示 。 单 击 【 下 一 页 】 按 钮 ， 事 件 触 发 顺序 如 图 19-6 所 示 。 


localhost 


古诗 欣赏 触发 pagebeforeshow 事件 ， 


下 一 页 即将 显示 


青青 园 中 葵 ， 朝 露 待 日 虹 。 
阳春 布 德 泽 ， 万 物 生 光辉 。 
localhost 


全 三 页 触发 pageshow 事件 ， 现 在 显 


示 下 一 页 


生计 


19-5 程序 预览 效果 19-6 ”当前 页 面 触发 事件 顺序 
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单 击 【确认 】 按 钮 ， 进 入 下 一 页 中 ， 如 图 19-7 所 示 。 单 击 【 上 一 页 】 按 钮 ， 事 件 触发 顺 
序 如 图 19-8 所 示 。 













localhost 
古诗 欣赏 触发 pagebeforehide 事件 ， 
Tn 
众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 
相 看 两 不 厌 ， 只 有 敬 亭 山 。 | 
localhost 
下 一 更 船 发 pagehide 事件 ， 现 在 隐 
藏 下 一 页 
公交 
图 19-7 ”程序 预览 效果 图 19-8 下 一 页 触发 事件 顺序 


19.2 触摸 事件 


针对 移动 端 浏览 器 提供 了 触摸 事件 ， 表 示 当 用 户 触摸 屏幕 时 触发 的 事件 ， 包 括 点 击 事件 
和 滑动 事件 。 本 节 重 点 学 习 点 击 事 件 和 滑动 事件 的 使 用 方法 。 


19.2.1 点 击 事件 


点 击 事件 包括 tap 事件 和 taphold 事件 ， 下 面 详细 介绍 它们 的 用 法 和 区 别 。 
1.tap 事件 
当 用 户 点 击 页 面 上 的 元 素 时 ， 会 触发 点 击 (tap) 事 件 ， 语 法 格式 如 下 。 


$("p") .on("tap",function(){ 
$ (this) .hide () 7 
有 


上 面 代码 的 作用 是 点 击 p 组 件 后 ， 会 将 该 组 件 隐藏 。 
下 面 通过 一 个 案例 来 讲解 点 击 事件 的 使 用 方法 。 
【 例 19.4】( 实 例文 件 ， ch19\19.4.html) 


<1DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
TA Min iE> 

<script> 

$ ("div") .on("tap", function(){ 
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颜色 变 成 了 绿色 ， 如 图 19-10 所 示 。 


短 


$(this) .css("color" "green") 7 
ye 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微风 。 桃 花 一 簇 开 无 主 ， 可 爱 深 红 爱 浅 红 。</p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 19-9 所 示 。 在 页 面 中 的 诗词 上 面 点 击 ， 即 可 发 现 div 块 内 文字 的 
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古诗 欣赏 古诗 欣赏 
黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微风 。 黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微风 。 
桃花 一 艇 开 无 主 ， 可 爱 深 红 爱 浅 红 。 桃花 一 能 开 无 主 ， 可 爱 深 红 爱 浅 红 。 
经 典 诗词 经 典 诗 词 
图 19-9 程序 预览 效果 图 19-10 触发 tap 事件 


2.taphold 事件 
如 果 点 击 页 面 并 按 住 不 放 ， 则 会 触发 taphold 事件 ， 语 法 如 下 。 


$("p") .on("taphold", function(){ 
$ (this) .hide(); 
D1); 
默认 情况 下 ， 按 住 不 放 750 毫秒 之 后 触发 taphold 事件 。 用 户 也 可 以 修改 这 个 时 间 的 长 
语法 格式 如 下 。 


$ (document) .on ("mobileinit",function(){ 
$.event.special.tap.tapholdThreshold=5000; 

Ds; 

修改 后 需要 按 住 5 秒 以 后 才 会 触发 taphold 事件 。 
【 例 19.5】( 实 例文 件 ， ch19\19.5.html) 


<!DOCTYPE html> 
<html> 


外 
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<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet™" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
Ls4.5.min Je"></script> 
<script> 
$ (document) .on ("mobileinit",function(){ 
$.event.special.tap.tapholdThreshold=1000 
和 
$(function(){ 
$ ("img") .on ("taphold", function(){ 
$ (this) .hide(); 
]) 7 
1 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 可 爱 宠物 </h1> 
</div> 
<div data-role="content" class="content"> 
<img src=19.1.jpg > <br> 


<p> 按 住 图 片 1 秒 后 隐藏 图 片 哦 ! </p> 





</div> 
<div data-role="footer"> 
<h1> 动 物 天 地 </h1> 

</div> 
</div> 
</body> 
</html> 
模拟 器 中 预览 效果 如 图 19-11 所 示 。 按 住 图 片 1 秒 后 ， 即 可 发 现 图 片 被 隐藏 了 ， 如 图 19-12 


所 示 。 


可 爱 宠物 





可 爱 宠物 
按 住 图 片 1 秒 后 隐藏 图 片 哦 ! 按 住 图 片 1 秒 后 隐藏 图 片 哦 ! 
动物 天 地 动物 天 地 
图 19-11 程序 预览 效果 图 19-12 触发 taphold 事件 


19.2.2 ”滑动 事件 


滑动 事件 是 在 用 户 一 秒 内 水 平 拖 忠 大 于 30px， 或 者 纵向 拖 忠 小 于 20px 的 事件 发 生 时 触发 


的 事件 。 滑 动 事件 使 用 swipe 语法 来 捕捉 ， 语 法 格式 如 下 。 


$("p") .on("swipe", function(){ 
$ ("span") .text ("滑动 检测 !") ; 
Ws 
上 述 语法 是 捕捉 p 组 件 的 滑动 事件 ， 并 将 消息 显示 在 span 组 件 中 。 
向 左 滑动 事件 在 用 户 向 左 拖 动 元 素 大 于 30px 时 触发 ， 使 用 swipeleft 语法 来 捕捉 ， 语 法 如 下 。 


$("p") .on("swipeleft",function(){ 
$ ("span") .text ("向 左 滑动 检测 !"); 
]) 7 


向 右 滑动 事件 在 用 户 向 右 拖 动 元 素 大 于 30px 时 触发 ， 使 用 swiperight 语法 来 捕捉， 语法 


如 下 。 


$("p") .on("swiperight,function(){ 
$ ("span") .text ("向 右 滑动 检测 !"); 
]) 7 


下 面 以 向 右 滑动 事件 为 例 进行 讲解 。 
【 例 19.6】( 实 例文 件 ，ch19\19.6.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/ 
jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
下 的 各 二 二 /SC 
<script> 
$ (document) .on ("pagecreate", "#first",function(){ 
$ ("img") .on ("swiperight",function(){ 
alert (" 干 嘛 向 右 滑动 我 ! 1") ; 
1D); 
1); 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 可 爱 宠物 </h1> 
</div> 
<div data-role="content" class="content"> 
<img src=19.2.jpg > <br> 
<p> 向 右 滑动 图 片 查 看 效果 </p> 
</div> 
<div data-role="footer"> 


<h1> 动 物 天 地 </h1> 
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</div> 
</div> 
</body> 
</html> 
模拟 器 中 预览 效果 如 图 19-13 所 示 。 向 右 滑动 图 片 ， 效 果 如 图 19-14 所 示 。 
可 爱 宠物 可 爱 宠物 





localhost 
干 嘛 向 右 滑动 我 ! 
确认 





向 右 滑动 图 片 查看 效果 向 右 滑动 图 片 查看 效果 
图 19-13 程序 预览 效果 图 19-14 触发 向 右 滑动 事件 


19.3 滚屏 事件 


jQuery Mobile 提供 了 两 种 滚屏 事件 ， 分 别 是 滚屏 开始 时 触发 scrollstart 事件 和 滚动 结束 
时 触发 serollstop 事件 。 


1. scrollstart 事件 
scrollstart 事件 是 在 用 户 开 始 滚动 页 面 时 触发 ， 语 法 格式 如 下 。 


$ (document) .on("scrollstart",function(){ 
alert ("屏幕 开始 深 动 了 !1"); 
Ds; 


下 面 通过 一 个 案例 来 理解 scrollstart 事件 。 
【 例 19.7】( 实 例文 件 ，ch19\19.7.html) 


<1DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
1.4.5.min. js"></acript> 
<script> 
$ (document) .on ("pagecreate", "#first",function(){ 

$ (document) .on("scrollstart",function(){ 


r 


第 
alert ("屏幕 开始 滚动 了 !"); 注 
Ds 局 
草 
Ds; 

</script> 司 
</head> 5 
<body> = 
<div data-role="page" id="first"> 3 
<div data-role="header"> 态 
<h1> 古 诗 欣 赏 </h1> 

</div> 
件 


<div data-role="content" class="content"> 
<p> 西 施 越 溪 女 ， 出 自 芝 葛 山 。</p> 
<p> 秀 色 掩 今 古 ， 荷 花 羞 玉 颜 。</p> 
<p> 浣 纱 弄 碧水 ， 自 与 清 波 闲 。</p> 
<p> 卑 齿 信 难 开 ， 沉 吟 碧 云 间 。</p> 
<p> 勾 践 征 绝 艳 ， 扬 蛾 入 吴 关 。</P> 
<p> 提 携 馆 娃 宫 ， 杏 渺 认可 攀 。</p> 
<p> 一 破 夫 差 国 ， 千 秋 竞 不 还 。</p> 
<p> 西 施 越 溪 女 ， 出 自 世 葛 山 。</P> 
<p> 秀 色 掩 今 古 ， 荷 花 闭 玉 颜 。</p> 
<p> 浣 纱 和 弄 外 水 ， 自 与 清 波 闲 。</p> 
<p> 扩 齿 信 难 开 ， 沉 吟 脆 云 间 。</p> 
<p> 勾 践 币 绝 艳 ， 扬 蛾 入 吴 关 。</p> 
<p> 提 携 馆 娃 宫 ， 杏 渺 认可 梦 。</p> 
<p> 一 破 夫 差 国 ， 千 秋 况 不 还 。</p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 19-15 所 示 。 向 上 滚动 屏幕 ， 效 果 如 图 19-16 所 示 。 


Cope Nob Cotom i] 
西施 越 溪 女 ， 出 自 艺 萝 山 。 
秀色 掩 今 古 ， 荷 花 闭 玉 颜 。 


浣 纱 弄 碧水 ， 自 与 清 波 闲 。 











西施 越 溪 女 ， 出 自 苦 葛 山 
秀色 撞 今 古 ,荷花 著 玉 睛 。 扩 具 位 兴工 澡 扩 理 二 癌 


localhost 
多 路 屏幕 开始 滚动 了 ! 


Re = | 


浣 纱 弄 舌 水 ， 自 与 清 波 闲 。 

















勾践 俭 绝 艳 ， 扬 蛾 入 吴 关 。 一 破 天 莽 国 - 干 秋 竟 不 还 一 
提携 馆 娃 宫 ， 坦 渺 证 可 移 。 西施 越 溪 女 ， 出 自 艺 萝 山 。 
一 破 夫差 国 ， 干 秋 况 不 还 秀色 挤 今 古 ， 荷 花 闭 玉 颜 。 
西施 越 溪 女 ， 出 自 蔚 萝 山 。 尝 纱 弄 眉 水 ， 自 与 清 波 闲 。 
ZE 
som or pr2 [Gn] [Loo 7] umm ots op233 [Bm] [lo0% | 
图 19-15 ”程序 预览 效果 图 19-16 触发 滚屏 事件 
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2. scrollstop 事件 
scrollstop 事件 是 在 用 户 停止 滚动 页 面 时 触发 ， 语 法 格式 如 下 。 


$ (document) .on ("scrollstop", function(){ 
alert (" 停 止 滚动 !") ; 
]) 


下 面 通过 一 个 案例 来 理解 scrollstart 事件 。 
【 例 19.8】( 实 例文 件 : ch19\19.8.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
1.4.5.min.js"></script> 
<script> 
$ (document) .on ("pagecreate", "#first",function(){ 
$ (document) .on("scrollstop",function(){ 
alert ("屏幕 已 经 停止 滚动 了 !1"); 
DD); 
]) 7 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 嘲 吁 噬 ， 危 乎 高 哉 ! </p> 
<p> 罚 道 之 难 ， 难 于 上 青天 ! </p> 
<p> 乔 从 及 鱼 总 ， 开 国 何 茫然 ! </p> 
<p> 尔 来 四 万 八 千岁 ， 不 与 秦 塞 通 人 烟 。</p> 
<p> 西 当 太白 有 鸟 道 ， 可 以 横 绝 峨 岂 岂 。</p> 
<p> 地 崩 山 挫 壮 士 死 ， 然 后 天 梯 石 栈 方 钩 连 。</p> 
<p> 上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 川 。</p> 
<p> 黄 知之 飞 尚 不 得 过 ， 猿 猪 欲 度 悉 攀援 。</p> 
<p> 青 泥 何 盘 盘 ， 百 步 九 折 蒙 岩 斌 。< /p> 
<p> 拉 参 历 井 仰 胁 息 ， 以 手 抚 庚 坐 长 叹 。</p> 
<p> 问 君 西游 何 时 还 ? 点 途 风 岩 不 可 攀 。</p> 
<p> 但 见 翡 鸟 号 古木 ， 雄 飞 从 肉 绕 林 间 。</p> 
<p> 又 闻 子 规 啼 夜 月 ， 愁 空山 。</p> 
<p> 蜀 道 之 难 ， 难 于 上 青天 ， 使 人 听 此 凋 朱 颜 。</P> 
<p> 连 峰 去 天 不 春 尺 ， 枯 松 倒挂 倚 绝 壁 。</p> 
<p> 飞 满 瀑 流 争 喧 座 ， 灰 岸 转 石 万 军 雷 。</p> 
<p> 其 险 也 若 此 ， 晓 尔 远道 之 人 ， 胡 为 乎 来 哉 。</p> 
<p> 剑 阁 峰 嵘 而 岑 更， 一夫 当 关 ， 万 夫 莫 开 。</p> 
<p> 所 和 守 或 菲 亲 ， 化 为 狼 与 对 。</p> 
<p> 朝 避 猛 虎 ， 夕 避 长 蛇 ， 磨 牙 哆 血 ， 杀 人 如 麻 。</p> 
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<p> 锦 城 虽 云 乐 ， 不 如 早 还 家 。</p> 


<p> 罚 道 之 难 ， 难 于 上 青天 ， 侧 身 西 望 长 咨 唆 。</p> 


</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 19-17 所 示 。 向 上 滚动 屏幕 ， 停 止 后 效果 如 图 19-18 所 示 。 





脐 吁 噬 ， 危 平 高 哉 ! 

蜀 道 之 难 ， 难 于 上 青天 ! 

看 从 及 鱼 鬼 ,开国 何 茫然 ! 

尔 来 四 万 八 千岁 ， 不 与 秦 塞 通 人 烟 。 

西 当 太白 有 鸟 道 ， 可 以 横 绝 峨 岂 骨 。 

地 岩山 摧 壮 士 死 ， 然 后 天 梯 石 栈 方 钧 连 。 


上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 
川 。 


黄 稚 之 飞 尚 不 得 过 ， 狐 狗 欲 度 愁 掌 援 。 
Ve) Pe 、 
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CC Opere Mobie -Cortom 


上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 
川 。 


黄 鹤 之 飞 尚 不 得 过 ， 猿 狐 欲 度 愁 攀 援 。 
青 泥 何 盘 盘 ， 百 步 九 折 葵 岩 变 。 


扣 参 localhost 
问 君 屏幕 已 经 停止 滚动 了 ! 


sn mL 


又 闻 子 规 啼 夜 月 ， 悉 空山 。 
蜀 道 之 难 ， 难 于 上 青天 ， 使 人 听 此 凋 朱 
颜 。 


连 峰 去 天 不 盈 尺 ， 枯 松 倒挂 估 绝 壁 。 





Re 已 
Castom 497%539 ppt 233 [Gn] [Lo0% =] 





图 19-17 程序 预览 效果 





19-18 ”触发 滚屏 事件 


19.4 定位 事件 


当 移动 设备 水 平 或 垂直 翻转 时 触发 定位 事件 。 也 就 是 常 说 的 方向 改变 (orientation change) 


JR 





有 件 。 


在 使 用 定位 事件 时 ， 需 将 orientation change 事件 绑 定 到 window 对 象 上 ， 语 法 格式 如 下 。 


$ (window) .on("orientationchange" 


function (event) { 


alert ("设备 的 方向 改变 为 "+ event -orientation) 7 


1); 


这 里 的 event 对 象 用 来 接收 orientation 属性 值 ， 用 event.orientation 返 


是 垂直 ， 类 型 为 字符 串 ， 如 果 是 横行 ， 返 回 














回 的 是 设备 是 水 平 还 
值 为 landscape， 如 果 是 纵向 ， 返 回 值 为 portrait。 


下 面 通过 一 个 案例 来 理解 orientationchange 事件 。 





【 例 19.9】( 实 例文 件 : ch19\19.9.html) 


<!DOCTYPE html> 
<html> 





a 
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<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script sr http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
L445.min a></acript> 
<script type="text/javascript"> 
$ (document) .on ("pageinit",function (event){ 
$( window ) .on( "orientationchange", function( event ) { 
if(event.orientation == "landscape") 
$ ( "#orientation"” ) .text ("现在 是 水 平 模式 !" ) .css({"background- 
color":"yellow", "font-size":"300%"}); 
if(event.orientation == "portrait") 
$( "#orientation" ) .text( "现在 是 垂直 模式 !"” ) -css ({"background- 
color":"green", "font-size":"200%"}); 
1); 
1 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<span id="orientation"></span><br> 
<p> 燕 草 如 正 丝 ， 秦 桑 低 绿 枝 。 当 君 怀 归 日 ， 是 妾 断肠 时 。 春 风 不 相识 ， 何 事 入 罗 帽 </p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 19-19 所 示 。 单 击 模拟 器 上 的 方向 改变 按钮 鸭 ， 此 时 方向 改变 为 
水 平方 向 ， 效 果 如 图 19-20 所 示 。 
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再 次 单 击 模拟 器 上 的 方向 改变 按钮 国 ， 此 时 方向 改变 为 垂直 方向 ， 效 果 如 图 19-21 所 示 。 
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图 19-21 设备 垂直 方向 
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19.5 高 手 甜 点 


甜点 1: 绑 定 事件 的 方法 on0 和 one() 方 法 有 何 区 别 ? 


绑 定 事件 的 on0 和 one0 方 法 的 作用 相似 ， 唯 一 的 区 别 在 于 one0 方 法 只 能 执行 一 次 。 例 
当 在 按钮 上 绑 定单 击 鼠 标 事件 时 ，on0 方 法 的 代码 如 下 。 
<script> 
$(document) .on('click',function(){ 
alert ("这 是 使 用 on () 方 法 绑 定 的 事件 ") 


1D); 
</script> 


甜点 2: 如 何在 设备 方向 改变 时 获取 移动 设备 的 高 度 和 宽度 ? 
如 果 设 备 方向 改变 时 要 获取 移动 设备 的 长 度 和 宽度 ， 可 以 绑 定 resize 事件 。 该 事件 在 页 


面 大 小 改变 时 将 触发 ， 语 法 如 下 。 


$ (window) .on ("resize",function(){ 

Var win= $ (this); //this 指 的 是 window 

alert ("宽度 为 "+win.width()+" 高 度 为 "+ win.height ()) 7 
Dm 
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19.6” 跟 我 练 练 手 


练习 1: 制作 一 个 包含 初始 化 事件 的 jQuery Mobile 网 页 。 

练习 2: 制作 一 个 包含 外 部 加 载 失败 页 面 的 jQuery Mobile 网 页 。 
练习 3: 制作 一 个 包含 页 面 过 渡 事 件 的 jQuery Mobile 网 页 。 
练习 4: 制作 一 个 包含 点 击 事件 的 jQuery Mobile 网 页 。 

练习 5: 制作 一 个 包含 滑动 事件 的 jQuery Mobile 网 页 。 

练习 6: 制作 一 个 包含 滚屏 事件 的 jQuery Mobile 网 页 。 

练习 7: 制作 一 个 包含 定位 事件 的 jQuery Mobile 网 页 。 
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20.1 认识 Web 存储 


在 HIML 5 标准 之 前 ，Web 存储 信息 需要 cookie 来 完成 ， 但 是 cookie 不 适合 大 量 数据 的 
存储 ， 因 为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ， 这 使 得 cookie 速度 很 慢 而 且 效 率 也 不 高 。 为 
此 ， 在 HIML 5 中 ，Web 存储 API 为 用 户 如 何在 计算 机 或 设备 上 存储 用 户 信息 作 了 数据 标准 
的 定义 。 


20.1.1 本 地 存储 和 cookies 的 区 别 


本 地 存储 虽然 和 cookies 扮演 着 类 似 的 角色 ， 但 是 二 者 却 有 根本 的 区 别 。 

e@ ”本 地 存储 是 仅 存 储 在 用 户 的 硬盘 上 ， 并 等 待 用 户 读 取 ， 而 cookies 是 在 服务 器 上 读 取 。 

e ”本 地 存储 仅 供 客户 端 使 用 ， 如 果 需 要 服务 器 端 根 据 存 储 数值 作出 反应 ， 就 应 该 使 用 
cookies。 

e@ ” 读 取 本 地 存储 不 会 影响 到 网 络 带 宽 ， 但 是 使 用 cookies 将 会 发 送 到 服务 器 ， 这 样 会 影 
响 到 网 络 带宽 ， 无 形 中 增加 了 成 本 。 

@ ”从 存储 容量 上 看 ， 本 地 存储 可 存储 多 达 5MB 的 数据 ， 而 cookies 最 多 只 能 存储 4KB 
的 数据 信息 。 


20.1.2” Web 存储 方法 


在 HTML 5 标准 中 ， 提 供 了 以 下 两 种 在 客户 端 存 储 数据 的 新 方法 。 
® sessionStorage: sessionStorage 是 基于 session 的 数据 存储 ， 在 关闭 或 者 离开 网 站 后 ， 
数据 将 会 被 删除 ， 也 被 称 为 会 话 存储 。 

@ “localStorage: 没有 时 间 限 制 的 数据 存储 ， 也 被 称 为 本 地 存储 。 

与 会 话 存储 不 用 ， 本 地 存储 将 在 用 户 计算 机 上 永久 保持 数据 信息 。 关 闭 浏 览 器 窗口 后 ， 
如 果 再 次 打开 该 站 点 ， 将 可 以 检索 所 有 存储 在 本 地 上 的 数据 。 

在 HTML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 才 使 用 数据 ， 这 
样 存储 大 量 数据 时 不 会 影响 网 站 性 能 。 对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 一 个 
网 站 只 能 访问 其 自身 的 数据 。 


pr HTML 5 使 用 JavaScript 来 存储 和 访问 数据 ， 为 此 ， 建 议 用 户 可 以 多 了 解 一 下 
站 JavaScript 的 基本 知识 。 








20.2 使 用 HTML 5 Web Storage API 技术 


使 用 HIML 5 Web Storage API 技术 ， 可 以 实现 很 好 的 本 地 存储 功能 。 
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20.2.1 案例 1 测试 浏览 器 的 支持 情况 


是 否 可 以 使 用 这 项 技术 ， 主 要 有 两 种 方法 。 


码 如 下 。 





Web Storage 在 各 大 主流 浏览 器 中 都 被 支持 ， 但 是 为 了 兼容 老 的 浏览 器 ， 还 是 要 检查 一 下 


1. 通过 检查 Storage 对 象 是 否 存在 
第 一 种 方式 : 通过 检查 Storage 对 象 是 否 存 在 ， 来 检查 浏览 器 是 否 支 持 Web Storage， 代 


if(typeof (Storage) !=="undefined"){ 

// Yes! localStorage and sessionStorage support! 
// Some code..... 

} else { 

// Sorry! No web storage support.. 


} 


2. 分 别 检查 各 自 的 对 象 
第 二 种 方式 就 是 分 别 检查 各 自 的 对 象 ， 例 如 ， 检 查 localStorage 是 否 支持 ， 代 码 如 下 。 


if (typeof (localStorage) == 'undefined' ) { 

alert ('Your browser does not support HTML 5 localStorage. Try upgrading.'); 
else { 

// Yes! localStorage and sessionStorage support! 

// Some code..... 
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或 者 : 

if('"'localSsStorage' in window && window['localStorage'] !== null){ 

// Yes! localStorage and sessionStorage support! 

// Some code..... 

else { 

alert ('Your browser does not support HTML 5 localStorage. Try upgrading.'); 


或 者 

if (!!localstorage) { 

// Yes! localStorage and sessionStorage support! 

// Some code..... 

else { 

alert ('Your browser does not support HTML 5 localSstorage. Try upgrading.'); 





20.2.2 ”案例 2 一 一 使 用 sessionStorage 方法 创建 对 象 


sessionStorage 方法 针对 一 个 session 进行 数据 存储 。 如 果 用 户 关闭 浏览 器 窗口 后 ， 数 据 会 


被 自动 删除 。 创 建 一 个 sessionStorage 方法 的 基本 语法 格式 如 下 。 


<script type="text/javascript"> 
SessionStorage -abc="” "7 
</script> 
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1. 创建 对 象 
【 例 20.1】 使 用 sessionStorage 方法 创建 对 象 ( 实 例文 件 : ch20\20.1.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
SessionStorage - name=" 努 力 过 好 每 一 天 ! "; 
document .write (SessionStorage .name) 7 
</script> 

</body> 

</html> 


在 下 中 浏览 效果 如 图 20-1 所 示 ， 可 以 看 到 sessionStorage 方法 创建 的 对 象 内 容 显 示 在 网 
页 中 。 








] (3 司 ENHTML5 网 页 chl%l5lhm @ Pr-O 
怕 ENHTIML5 x 
文件 脱 。 半 很 日 查看 M)。 收 项 交 (A) 工具 (帮助 (H) 








努力 过 好 每 一 天 ! 








图 20-1 sessionStorage 方法 创建 对 象 的 效果 
2. 制作 网 站 访问 记录 计数 器 


下 面 继续 使 用 sessionStorage 方法 ， 制 作 记 录用 户 访问 网 站 次 数 的 计数 器 。 
【 例 20.2】 制 作 网 站 访问 记录 计数 器 (实例 文件 :ch20\20.2.html) 


<1DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 

if (sessionSstorage. count) 

{ 

sessionStorage .Count=Number (sessionStorage .Count) +17 
} 

else 

{ 

sessionStorage 。 Count=17 

} 

document .write ("您 访问 该 网 站 的 次 数 为 : " + sessionstorage.count); 
</script> 

</body> 

</html> 





a 
a 


在 正中 浏览 效果 如 图 20-2 所 示 。 如 果 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 加 1。 
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图 20-2 sessionStorage 方法 创建 计数 器 效果 


和。 如 呆 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 时 ， 计 数 器 将 重 置 为 1， 
x 


20.2.3 ”案例 3 一 一 使 用 localStorage 方法 创建 对 象 


与 seessionStorage 方法 不 同 ，localStorage 方法 存储 的 数据 没有 时 间 限 制 。 也 就 是 说 网 页 
浏览 者 关闭 网 页 很 长 一 段 时 间 后 ， 再 次 打开 此 网 页 时 ， 数 据 依然 可 用 。 
创建 一 个 localStorage 方法 的 基本 语法 格式 如 下 。 


<script type="text/javascript"> 
localstorage.abc=" "; 
</script> 


1. 创建 对 象 
【 例 20.3】 使 用 localStorage 方法 创建 对 象 (实例 文件 :ch20\20.3.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
localstorage.name=" 学 习 HTML 5 最 新 的 技术 : Web 存储 "; 
document .write (localStorage .name) 7 

</script> 

</body> 

</html> 


在 IE 中 浏览 效果 如 图 20-3 所 示 ， 可 以 看 到 localStorage 方法 创建 的 对 象 内 容 显 示 在 网 
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一 
20-3 localStorage 方法 创建 对 象 的 效果 
2. 制作 网 站 访问 记录 计数 器 
下 面 仍然 使 用 localStorage 方法 来 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 用 户 可 以 清楚 地 


看 到 localStorage 方法 和 sessionStorage 方法 的 区 别 。 
【 例 20.4】 制 作 网 站 访问 记录 计数 器 (实例 文件 ，ch20\20.4.html) 


<!DOCTYPE HTML> 
本 <html> 
\ <body> 
<script type="text/javascript"> 
if (localStorage -count) 
{ 
localSstorage.count=Number (localStorage.count) +17 
} 
else 
{ 
localstorage.count=1; 
} 
document .write ("您 访问 该 网 站 的 次 数 为 : " + localstorage.count"); 
</script> 
</body> 
</html> 


在 正中 浏览 效果 如 图 20-4 所 示 。 如 果 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 加 1; 如 果 用 
户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 时 ， 计 数 器 会 继续 上 一 次 计数 而 不 会 重 置 为 1。 














您 访 | 丰 该 网 站 的 次 数 为 : 











20-4 localStorage 方法 创建 计数 器 效果 


20.2.4 ”案例 4 一 一 Web Storage API 的 其 他 操作 


Web Storage API 的 localStorage 和 sessionStorage 对 象 除了 以 上 基本 应 用 外 ， 还 有 以 下 两 
个 方面 。 


1. 清空 localStorage 数据 


localStorage 的 clear0 函 数 用 于 清空 同 源 的 本 地 存储 数据 ， 如 localStorage.clear0， 它 将 删 
除 所 有 本 地 存储 的 localStorage 数据 。 

而 Web Storage 的 另外 一 部 分 Session Storage 中 的 clear0) 函 数 ， 只 清空 当前 会 话 存储 的 
数据 。 


2. 遍历 localStorage 数据 


遍历 localStorage 数据 可 以 查看 localStrage 对 象 保 存 的 全 部 数据 信息 。 在 遍历 过 程 中 ， 需 
要 访问 localStorage 对 象 的 另外 两 个 属性 length 与 key。length 表示 localStorage 对 象 中 保存 数 
据 的 总 量 ，key 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 (index) 配 合 使 用 ， 表 示 第 几 条 键 
名 对 应 的 数据 记录 ， 其 中 ， 索 引号 (index) 以 0 值 开 始 ， 如 果 取 第 3 条 键 名 对 应 的 数据 ，index 
值 应 该 为 2。 

取出 数据 并 显示 数据 内 容 的 代码 如 下 。 

functino showInfo(){ 

Var array=new Array(); 

Eor (Var i=0;i 

// 调 用 key 方法 获取 localstorage 中 数据 对 应 的 键 名 

// 如 这 里 键 名 是 从 test1 开始 递增 到 testN 的 ， 那 么 localstorage .key (0) 对 应 test1l 
Var getKey=localStorage.key (i); 


// 通 过 键 名 获取 值 ， 这 里 的 值 包括 内 容 和 日 期 
Var getVal=localStorage.getItem(getKey); 
//array[0] 就 是 内 容 ，array [1] 是 日 期 
array=getVal.split(","); 
} 

} 


获取 并 保存 数据 的 代码 如 下 。 


Var storage = window.1localStoragey 工 

or (var i=0, len = storage.length; i < len; i++){ 
Var key = storage.key (i); 

Var Value = storage.getIitem(key); 

console.log(key + "=" + value); } 


[ 由 于 localStorage 不 仅 存 储 了 这 里 所 添加 的 信息 ， 可 能 还 存在 其 他 信息 ， 但 是 那 
让 些 信息 的 键 名 也 是 以 递增 数字 形式 表示 的 ， 如 果 这 里 也 用 纯 数字 就 可 能 履 盖 那些 信 
总 。 息 ， 所 以 建议 键 名 都 用 独特 的 字符 区 分 开 ， 这 里 在 每 个 ID 前 加 了 test 以 示 区 别 。 


20.2.5 “案例 5 一 一 使 用 JSON 对 象 存 取 数 据 
在 HIML 5 中 可 以 使 用 JSON 对 象 来 存 取 一 组 相关 的 对 象 。 使 用 JSON 对 象 可 以 收集 一 
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组 用 户 输入 信息 ， 然 后 创建 一 个 Object 来 吉 括 这 些 信息 ， 之 后 用 一 个 JSON 字符 串 来 表示 该 
Object， 然 后 把 JSON 字符 串 存放 在 localStorage 中 。 当 用 户 检索 指定 名 称 时 ， 会 自动 用 该 名 
称 在 localStorage 中 取得 对 应 的 JSON 字符 串 ， 将 字符 串 解 析 到 Object 对 象 ， 然 后 依次 提取 对 
应 的 信息 ， 并 构造 HTML 文本 输入 显示 。 

【 例 20.5】 使 用 JSON 对 象 存 取 数 据 ( 实 例文 件 : ch20\20.5.html) 

下 面 就 来 列举 一 个 简单 的 案例 ， 介 绍 如 何 使 用 JSON 对 象 存 取 数据 ， 具 体操 作 方法 如 下 。 

ET 新 建 一 个 记事 本 文件 ， 具 体 代 码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 JSON 对 象 存 取 数 据 </title> 

<script type="text/javascript" src="objectStorage.js"></script> 
</head> 

<body> 

<h3> 使 用 JSON 对 象 存 取 数 据 </h3> 

<h4> 填 写 待 存 取信 息 到 表格 中 </h4> 

<table> 

<tr><td> 用 户 名 :</td><td><input type="text" id="name"></td></tr> 
<tr><td>E-mail:</td><td><input type="text" id="email"></td></tr> 
<tr><td> 联 系 电话 :</td><td><input type="text" id="phone"></td></tr> 
<tr><td></td><td><input type="button" value=" 保 存 " onclick="savestorage();"> 
</td></tr> 

</table> 

<hr> 

<h4> 检索 已 经 存 入 localStorage 的 JSON 对 象 ， 并 且 展 示 原 始 信息 </h4> 

<p> 

<input type="text" id="find"> 

<input type="button" value=" 检 索 " onclick="findstorage('msg');"> 
</p> 

<!-- 下 面 这 块 用 于 显示 被 检索 到 的 信息 文本 --> 

<p id ="msg"></p> 

</body> 

</html> 


EDEUD9 使 用 IE 浏览 保存 的 HTML 文件 ， 页 面 显示 效果 如 图 20-5 所 示 。 
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ES 案例 中 用 到 了 JavaScript 脚本 ， 其 中 包含 两 个 函数 ， 一 个 是 存 数 据 ， 另 一 个 是 取 
数据 ， 具 体 的 JavaScript 脚本 代码 如 下 。 


function saveStorage (){ // 创 建 一 个 avascript 对 象 ， 用 于 存放 当前 从 表单 获得 的 数据 
var data = new Object; // 将 对 象 的 属性 值 名 依次 和 用 户 输入 的 属性 值 关联 起 来 
data.user=document .getElementBVYId("user") .value; 

data.mail=document .getElementById ("mail") .value; 

data.tel=document .getElementById("tel") .value; 

// 创 建 一 个 JSON 对 象 ， 让 其 对 应 HTML 文件 中 创建 的 对 象 的 字符 串 数据 形式 

Var str = JSON.stringify(data); 

// 将 JSON 对 象 存放 到 localstorage 上 ，key 为 用 户 输入 的 NAME，value 为 这 个 JSON 字符 串 
localStorage.setItem(data.user, str); 

console.1og ("数据 已 经 保存 ! 被 保存 的 用 户 名 为 : "+data.user); 

} 

// 从 localstorage 中 检索 用 户 输入 的 名 称 对 应 的 JSON 字符 串 ， 然 后 把 JSoON 字符 串 解析 为 一 
组 信息 ， 并 且 打 印 到 指定 位 置 

function findstorage (id){ // 获 得 用 户 的 输入 ， 是 用 户 希 望 检 索 的 名 字 

Var requiredPersonName = document .getElementBYyId("find") .value; 

// 以 这 个 检索 的 名 字 来 查找 localstorage, 得 到 了 JSON 字符 串 

Var str=localStorage.getIitem(requiredPersonName); 

// 解 析 这 个 JSON 字符 串 得 到 object 对 象 

Var data= JSON.parse (str); 

// 从 object 对 象 中 分 离 出 相关 属性 值 ， 然 后 构造 要 输出 的 HTML 内 容 

var result=" 用 户 名 :"+data.usert'<br>'; 
result+="E-mail:"+data.mail+'<br>'; 

result+=" 联 系 电 话 :"+data.tel+'<br>'; // 取 得 页 面 上 要 输出 的 容器 

var target = document.getElementById(id); // 用 刚才 创建 的 HTML 内 容 来 填充 这 
个 容器 

target.innerHTML = result; 


} 


ETT》 将 JavaScript 文件 和 HTML 文件 放 在 同一 目录 下 ， 再 次 打开 网 页 ， 在 表单 中 依 
次 输入 相关 内 容 ， 单 击 【 保 存 】 按 钮 ， 如 图 20-6 所 示 。 
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EED9p 在 【检索 】 文 本 框 中 输入 已 保存 信息 的 用 户 名 ， 单 击 【 检 索 】 按 钮 ， 则 在 页 面 
下 方 自动 显示 保存 的 用 户 信息 ， 如 图 20-7 所 示 。 
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图 20-7 检索 数据 信息 


20.3 ”在 本 地 建立 数据 库 


前 面 简单 介绍 了 如 何 利用 localStorage 方法 实现 本 地 存储 ， 实 际 上 ， 除 了 sessionStorage 和 
localStorage 方法 外 ，HTML 5 还 支持 通过 本 地 数据 库 Web SQL Database 进行 本 地 数据 存储 。 


20.3.1 Web SQL Database 概述 


Web SQL Database 是 关系 型 数据 库 系统 ， 使 用 SQLLite 语法 访问 数据 库 ， 支 持 大 部 分 浏 
览 器 ， 该 数据 库 多 集中 在 嵌入 式 设备 上 。 

Web SQL Database 数据 库 中 定义 的 3 个 核心 方法 如 下 。 

@ ”openDatabase: 该 方法 使 用 现 有 数据 库 或 新 建 数 据 库 来 创建 数据 库 对 象 。 

@ ”executeSql: 该 方法 用 于 执行 SQL 查询 。 

®@ ”transaction: 该 方法 允许 用 户 根据 情况 控制 事务 提交 或 回 深 。 

在 Web SQL Database 中 ， 用 户 可 以 打开 数据 库 并 进行 数据 的 新 增 、 读 取 、 更 新 与 删除 等 
操作 。 操 作 数 据 的 基本 流程 如 下 。 

(1) 创建 数据 库 。 

(2) 创建 交易 (transaction)。 

(3) 执行 SQL 语法 。 

(4) 获取 SQL 语句 执行 的 结果 。 


20.3.2 ”数据 库 的 基本 操作 
数据 库 的 基本 操作 如 下 。 


1. 创建 数据 库 

使 用 openDatabase( 方 法 打开 一 个 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 ， 使 用 该 方法 将 
会 创建 一 个 新 数据 库 。 打 开 或 创建 一 个 数据 库 的 代码 命令 如 下 。 

var db = openDatabase('mydb'，'1.1'，' 第 一 个 数据 库 '，200000) > 

上 述 代码 的 括号 中 设置 了 4 个 参数 ， 其 意义 分 别 为 数据 库 名 称 、 版 本 号 、 文 字 说 明 、 数 
据 库 的 大 小 和 创建 回 滚 。 


@¥ 如 果 数据 库 已 经 创建 了 ， 有 4 个 参数 将 会 调用 该 回 滚 操作 。 如 果 省 略 此 参数 ， 则 
长 仍 将 创建 正确 的 数据 库 。 
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以 上 代码 的 意义 : 创建 了 一 个 数据 库 对 象 tb， 名 称 是 mydb， 版 本 编号 为 1.1。db 还 带 
有 描述 信息 和 大 概 的 大 小 值 。 用 户 代理 (user agentb) 可 使 用 这 个 描述 与 用 户 进行 交流 ， 说 明 数 据 
库 是 用 来 做 什么 的 。 利 用 代码 中 提供 的 大 小 值 ， 用 户 代理 可 以 为 内 容留 出 足够 的 存储 空间 。 
如 果 需 要 ， 这 个 空间 大 小 是 可 以 改变 的 ， 所 以 没有 必要 预先 假设 允许 用 户 使 用 多 少 空间 。 

为 了 检测 之 前 创建 的 连接 是 否 成 功 ， 可 以 检查 数据 库 对 象 是 否 为 null， 代 码 如 下 。 

if(!db) 

alert ("数据 库 连接 失败 ") ; 

绝 不 可 以 假设 该 连接 已 经 成 功 建立 ， 即 使 过 去 对 于 某 个 用 户 而 言 它 是 成 功 连 接 的 。 而 为 
什么 一 个 连接 会 失败 ， 则 存在 多 个 原因 。 也 许 用 户 代 理 出 于 安全 原因 拒绝 访问 ， 也 许 设备 存 
储 有 限 。 面 对 活跃 而 快速 进化 的 潜在 用 户 代理 ， 对 用 户 的 机 器 、 软 件 及 其 能 力作 出 假设 是 非 
常 不 明智 的 行为 。 

2. 创建 交易 

创建 交易 时 使 用 database.transaction0 函 数 ， 语 法 格式 如 下 。 


db .transaction (function (tx)){ 
// 执 行 访问 数据 库 的 语句 
]) 


该 函数 使 用 function(tx) 作 为 参数 ， 执 行 访问 数 据 库 的 具体 操作 。 
3. 执行 SQL 语句 
通过 executeSql() 方 法 执行 SQL 语句 ， 从 而 对 数据 库 进行 操作 ， 代 码 如 下 。 


tx .executeSdql (sqlQuery, [valuel,value?2..],dataHandler,errorHandler) 


executeSql0 方 法 有 4 个 参数 ， 作 用 分 别 如 下 。 

@ sqlQuery: 需要 具体 执行 的 SQL 语句 ， 可 以 是 create、select、update 和 delete。 

@ [valuel,value2..]: SQL 语句 中 所 有 使 用 到 的 参数 的 数组 ， 在 executeSql0 方 法 中 ， 将 
SQL 语句 中 所 要 使 用 的 参数 先 用 “?” 代 蔡 ， 然 后 依次 将 这 些 参数 组 成 数组 放 在 第 2 
个 参数 中 。 

@ dataHandler: 执行 成 功 时 调用 的 回调 函数 ， 通 过 该 函数 可 以 获得 查询 结果 集 。 

@ errorHandler: 执行 失败 时 调用 的 回调 函数 。 
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4. 获取 SQL 语句 执行 的 结果 
当 SQL 语句 成 功 执行 后 ， 就 可 以 使 用 循环 语句 来 获取 执行 的 结果 ， 代 码 如 下 。 


for (var a=0; a<result.rows.length; a++){ 
item = result.rows.item(a); 
$ ("div") .html (item["name"] +"<br>"); 

} 


resultrows 表示 结果 数据 ，resultrows.length 表示 数据 共有 几 条 ， 然 后 通过 resultrows.item(a) 
获取 每 条 数据 。 


20.3.3 ”数据 表 的 基本 操作 
创建 数据 表 的 语句 为 CREATE TABLE， 语 法 格式 如 下 。 


CREATE TABLE < 表 名 > 
( 





字段 名 1 数据 类 型 [约束 条 件 ] ， 
字段 名 2 数据 类 型 [约束 条 件 ] ， 


2 

使 用 CREATE TABLE 创建 表 时 ， 必 须 指定 以 下 信息 。 

@ 要 创建 的 表 的 名 称 ， 不 区 分 大 小 写 ， 不 能 使 用 SQL 语言 中 的 关键 字 ， 如 DROP、 
ALTER、INSERT 等 。 

@ ”对 于 数据 表 中 每 一 个 列 ( 字 段 ) 的 名 称 和 数据 类 型 ， 如 果 需 创建 多 个 列 ， 要 用 逗号 
隔 开 。 

例如 ， 创 建 员 工 表 tb_emp1， 结 构 如 表 20-1 所 示 。 


表 20-1 tb_emp1 表 结 构 


字段 名 称 





introduction 


创建 tb_empl 表 ，SQL 语句 如 下 。 


CREATE TABLE tb empl 

( 
id int PRIMARY KEY, 
name char (10), 
introduction varchar(300) 


); 
其 中 PRIMARY KEY 约束 条 件 定义 id 字段 为 主键 。 如 果 数 据 表 已 经 存在 ， 则 上 述 创建 命 
令 将 会 报错 ， 此 时 可 以 加 入 让 not exists 命令 先进 行 条 件 判断 。 下 面 通过 一 个 综合 案例 来 


学 习 。 
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【 例 20.6】( 实 例文 件 : ch20\20.6.htmD 


<!DOCTYPE html> 
<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 
$(function () { 

// 打 开 数 据 库 

Var dbSize=2*1024*1024; 

db = openDatabase('mytestDB', '', '', dbsize); 

// 创 建 数 据 表 

db.transaction (function (tx){ 

tx.executeSql ("CREATE TABLE IF NOT EXISTS student (id integer PRIMARY 

KEY, name char(10),introduction varchar(300) )",[],onSsuccess,onError); 

1D); 

function onSuccess (tx, results) 

这 

$ ("div") .html ("数据 库 打开 成 功 !") 

} 

function onError(e) 

{ 

$ ("div") .html ("数据 库 打开 错误 : "+e) 
} 
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</script> 
</head> 
<body> 

<div id="message"></div> 
</body> 
</html> 
执行 结果 如 图 20-8 所 示 。 
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图 20-8 程序 运行 结果 


20.3.4 数据 的 基本 操作 
数据 表 创建 完成 后 ， 即 可 对 数据 进行 添加 、 更 新 、 查 询 和 删除 等 操作 。 
1. 添加 数据 
添加 数据 的 语法 规则 如 下 。 
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使 用 基本 的 INSERT 语句 插入 数据 ， 要 求 指定 表 的 名 称 和 插入 到 新 记录 中 的 值 ， 基 本 语 
法 格式 如 下 。 


INSERT INTO table name (column list) VALUES (value list); 


table_ name 指定 要 插入 数据 的 表 名 ，column _list 指定 要 插入 数据 的 那些 列 ，value list 指 
定 每 个 列 对 应 插入 的 数据 。 注 意 ， 使 用 该 语句 时 字段 列 和 数据 值 的 数量 必须 相同 。 
例如 ， 向 数据 表 student 添加 一 条 数据 ， 代 码 如 下 。 


INSERT INTO student (id ,name, introduction) VALUES (1,'lili', 'she is a 
good student'); 


在 添加 字符 串 时 ， 必 须 使 用 单 引号 。 

2. 更 新 数据 

表 中 有 数据 之 后 ， 接 下 来 可 以 对 数据 进行 更 新 操作 ，MySQL 中 使 用 UPDATE 语句 更 新 
表 中 的 记录 ， 可 以 更 新 特定 的 行 或 者 同时 更 新 所 有 的 行 ， 基 本 语法 结构 如 下 。 


UPDATE table name 
SET column namel = valuel,column name2=value2,...,column namen=valuen 
WHERE (condition); 





column_namel,column_name2,.…,column_namen 为 指定 更 新 的 字段 名 称 ;valuel,value2,.…,valuen 
为 相对 应 的 指定 字段 的 更 新 值 ，condition 指定 更 新 的 记录 需要 满足 的 条 件 。 更 新 多 个 列 时 ， 
每 个 “ 列 - 值 ”对 之 间 用 逗号 隔 开 ， 最 后 一 列 之 后 不 需要 逗号 。 

例如 ， 在 表 student 中 ， 更 新 id 值 为 1 的 记录 ， 将 name 字段 值 改 为 LiMing， 代 码 如 下 。 


UPDATE student SET name= 'LiMing' WHERE id = 17 


3. 查询 数据 

查询 数据 使 用 SELECT 的 命令 ， 语 法 格式 如 下 。 

SELECT valuel, value2 FROM table name WHERE (condition); 
例如 ， 在 表 student 中 ， 查 询 name 字段 值 为 LiMing 的 记录 ， 代 码 如 下 。 


SELECT id ,name, introduction FROM student WHERE name= 'LiMing'; 


4. 删除 数据 
从 数据 表 中 删除 数据 使 用 DELETE 语句 ，DELETE 语句 允许 WHERE 子 句 指定 删除 条 
件 。DELETE 语句 的 基本 语法 格式 如 下 。 


DELETE FROM table name [WHERE <condition>]; 


table name 指定 要 执行 删除 操作 的 表 ; [WHERE <condition>] 为 可 选 参数 ， 指 定 删除 条 
件 ， 如 果 没 有 WHERE 子 句 ，DELETE 语句 将 删除 表 中 的 所 有 记录 。 
例如 ， 表 student 中 ， 删 除 name 字段 值 为 LiMing 的 记录 ， 代 码 如 下 。 


DELETE FROM student WHERE name= 'LiMing'; 


a 


20.4 制作 简单 的 Web 留言 


使 用 Web Storage 的 功能 可 以 用 来 制作 Web 留言 本 ， 具 体制 作 方法 如 下 。 
【 例 20.7】( 实 例文 件 ，ch20\20.7.htmD 
TTY 构建 页 面 框架 ， 代 码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 本 地 存储 技术 之 Web 留言 本 </title> 
</head> 

<body onload="init()"> 

</body> 

</html> 


ER 添加 页 面 文件 ， 主 要 由 表单 构成 ， 包 括 单行 文字 表单 和 多 行文 本 表单 ， 代 码 如 下 。 


<h1l>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
SE 
<td> 留 言 </td> 
<td><textarea name="memo" id="memo" cols ="50" rows = "5"> 
</textarea></td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input type="submit" value=" 提 交 " onclick="saveData()" /> 
</td> 
</tr> 
</table> 
<ht> 
<table id="datatable" border="1"></table> 
<p id="msg"></p> 


为 了 执行 本 地 数据 库 的 保存 及 调用 功能 ， 需 要 插入 数据 库 的 脚本 代码 ， 具 体 代 
码 如 下 。 


<script> 

var datatable = null; 

var db = openDatabase ("MyData", "1.0","My Database",2*1024*1024); 
function init() 


1 
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datatable = document .getElementById ("datatable"); 
showAllData(); 
} 


function removeAllData(){ 
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for(var i = datatable.childNodes.length-1;i>=0;i-——){ 
datatable.removeChild(datatable.childNodes[i]); 


Var tr = document.createElement ('tr'); 
Var thl = document.createElement ('th'); 
Var th2 = document .createElement ('th'); 
var th3 = document .createElement ('th'); 
th1.innerHTML = "用 户 名 "; 

th2.innerHTML = "留言 " 
th3.innerHTML = "时 间 "; 
tr.appendchild (th1); 

tr .appendCchild(th2) 7 

tr .appendCchild(th3) 7 
qatatable.appendChild (tr) 7 





} 
function showAllData() 
{ 
db.transaction (function (tx){ 
tx.executeSql('create table if not exists MsgData(name TEXT, 
message TEXT,time INTEGER)', []); 
tx.executeSql('select * from MsgData', [],function(tx,rs){ 
removeAllData(); 
Eor (Var i=0;i<rs.rows.length;i++){ 
showData (rs.rows.item(i)); 


function showData (row){ 
Var tr=document .createElement ('tr'); 
Var tdl = document .createElement ('td') 7 
tdl .innerHTML = row.name; 
Var td2 = document.createElement ('td'); 
td2.innerHTML = row.message; 
Var td3 = document .createElement ('td'); 
var t = new Date() 7 
七 .setTime (row.time); 
ttd3 .innerHTML = 七 .toLocaleDateString() + " " + 七 .toLocaleTimeString()， 
tr .appendChild(tdl) 7 
tr .appendCchild(td2) 7 
tr .appendCchild(td3) 7 
datatable.appendChild (tr) 7 
} 
function addData (name,message,time) { 
db.transaction (function (tx){ 
tx.executeSsql ('insert into MsgData values(?,?,?)', [name,message,time], 
functionx,rs){ 
alert ("提交 成 功 。"); 
}rfunction(tx,error){ 
alert (error.sourcet+ 





"+error.message); 
Ds; 
]) 7 
} // End of addData 
function saveData() { 
Var name = document .getElementByld('name') .value; 


全; 





Var memo = document .getElementById ('memo') .value; 
Var time = new Date() -getTime () 7 
addData (name,memo,time); 
showAllData(); 
} // End of saveData 
</script> 
</head> 
<body onload="init()"> 
<h1>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
<tr> 
<td> 留 言 </td> 
<td><textarea name="memo" id="memo" cols ="50" rows = "5"> 
</textarea></td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input type="submit™" value=" 提 交 " onclick="saveData()" /> 
</td> 
</tr> 
</table> 
<ht> 
<table id="datatable" border="1"></table> 
<p id="msg"></p> 
</body> 
</html> 


文件 保存 后 ， 使 用 正 浏览 页 面 ， 效 果 如 图 20-9 所 示 。 
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图 20-9 Web 留言 本 


20.5 ”Web SQL Database 的 综合 应 用 技术 


下 面 使 用 Web SQL Database 数据 库 ， 实 现 数据 库 创建 、 数 据 新 增 、 查 看 和 删除 等 操作 。 
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【 例 20.8】( 实 例文 件 : ch20\20.8.htmD) 


<!IDOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style> 
table{border-collapse:collapse;} 
td{border:lpx solid #0000cc;padding:5px} 
#message{color:#ff0000} 
</style> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
// 打 开 数 据 库 
Var dbSize=2*1024*10247 
db = openDatabase('myDB', '', '', dbsize); 





db.transaction (function (tx){ 
// 创 建 数 据 表 
tx.executeSql ("CREATE TABLE IF NOT EXISTS person (id integer 
PRIMARY KEY,name char(10),introduction varchar(200))"); 
showAll (); 
]) 


$( "button”) .click(function () { 
Var name=$ ("#name") .val (); 
Var introduction=$ ("#introduction") .val (); 
if(name=="" || introduction=="")1{ 
$ ("#message") .html ("** 请 输入 姓名 和 简介 **"); 


return false; 


db.transaction (function (tx){ 
// 新 增 数据 
tx.executeSql ("INSERT INTO person (name, introduction) 
values(?,?)", [name,introduction],function(tx, result){ 

$ ("#message") .html ("新 增 数据 完成 !1") 
showAll(); 

}，Eunction(e)1{ 
$ ("#message") .html (" 新 增 数 据 错 误 :"+e-message) 


}) 


$("#showData") .on('click', ".delItem", function() { 
Var delid=$ (this) .prop("id"); 
db.transaction (function (tx){ 
// 删 除数 据 
Var delstr="DELETE FROM person WHERE id=?"; 
tx .executeSql (delstr, [delid],function(tx, result){ 
$ ("#message") .html ("删除 数据 完成 1") 
showAll(); 





Uy 


}rfunction(e){ 
$ ("#message") .html ("删除 数据 错误 :"+e .errorCode)，; 


}) 
function showAll(){ 
$("#showData") .html (""); 
db.transaction (function (tx){ 
// 显 示 person 数据 表 全 部 数据 
tx.executeSql ("SELECT id,name,introduction FROM person",[], 
function(tx, result){ 
if(result.rows.length>0){ 
var str=" 现 有 数据 : <br><table><tr><td>id</td><td> 姓 名 
</id><td> 简 介 </id><td>gnbsp;</id></tr>"; 
for(var i = 0; i < result.rows.length; i++){ 
item = result.rows.item(i); 
str+="<tr><td>"+item["id"] + "</td><td>" + 
item["name"] + "</td><td>" + item["introduction"] + "</td><td><input 
type='button' id='"+item["id"]+"' class='delItem' value=' 删 除 '></td></tr>"; 
} 
str+="</table>"; 
$("#showData") .html (str); 


> 加 刘 当 之 圳 0z 基 彰 





GG 


| 
}vfunction(e)1{ 
$("#message") .html ("SELECT 语法 出 错 了 !"+e.message) 
]) 7 
有 





}) 
</script> 
</head> 
<body> 
<h3> 数 据 新 增 与 删除 </h3> 
请 输入 姓名 和 简介 : 
<table> 
<tr> 
<td> 姓 名 : </td> 
<td><input type="text" id="name"></td> 
</tr> 
站 
<tq> 简 介 : </td> 
<td><input type="text" id="introduction"></td> 
</tr> 
</table> 
<button id='new'> 发 送 </button> 
<p> 
<div id="message"></div> 


<div id="showData"></div> 


</body> 
</html> 


程序 运行 结果 如 图 20-10 所 示 ， 输 入 姓名 和 简介 后 ， 单 击 【 提 交 】 按 钮 ， 即 可 看 到 新 提 
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交 的 数据 ， 单 击 【 删 除 】 按 钮 ， 即 可 删除 选中 的 数据 。 
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新 增 数据 完成 ! 
现 有 数据 ， 

id| 姓 名 | 简介 
1 | 张 三 | 他 是 一 名 大 学 生 | | 刚 族 
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图 20-10 程序 运行 结果 


20.6 高 手 甜 点 


甜点 1: 不 同 的 浏览 器 可 以 读 取 同一 个 Web 中 存储 的 数据 吗 ? 


在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 ， 如 果 用 户 使 用 的 是 
下 浏览 器 ， 那 么 Web 存储 工作 时 ， 所 有 数据 将 存储 在 正 的 Web 存储 库 中 ， 如 果 用 户 再 次 使 
用 Firefox 浏览 器 访问 该 站 点 ， 将 不 能 读 取 正 浏览 器 中 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 
是 分 开 并 独立 工作 的 。 

甜点 2: 离线 存储 站 点 时 是 否 需要 浏览 者 同意 ? 


和 地 理 定位 类 似 ， 在 网 站 使 用 manifest 文件 时 ， 浏 览 器 会 提供 一 个 权限 提示 ， 提 示 用 户 
是 否 将 离线 设 为 可 用 ， 但 不 是 每 一 个 浏览 器 都 支持 这 样 的 操作 。 





20.7 ” 跟 我 练 练 手 


练习 1: 使 用 sessionStorage 方法 创建 对 象 。 

练习 2: 使 用 localStorage 方法 创建 对 象 。 

练习 3: 使 用 JSON 对 象 存 取 数 据 。 

练习 4: 制作 简单 的 Web 留言 本 。 

练习 5: 制作 一 个 使 用 Web SQL Database 的 网 页 ， 实 现 添加 、 读 取 和 删除 数据 的 功能 。 
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jQuery 具有 强大 的 扩展 功能 ， 开 发 人 员 可 直接 使 用 或 自己 创建 jQuery 插件 来 
已 掌握 的 在 方 框 中 打 钩 ) 


扩充 jQuery 的 功能 。 使 用 插件 可 以 提高 项 目的 开发 效率 ， 解 决 人 力 成 本 ， 特 别 是 一 
些 功 能 比较 强大 的 插件 受到 了 开发 者 的 追捧 。 本 章 将 重点 学 习 jQuery 插件 的 开发 与 


使 用 。 
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21.1 初始 插件 


学 习 插 件 之 前 ， 首 先 需 要 了 解 插件 的 基本 概念 。 


21.1.1 什么 是 插件 


编写 插件 的 目的 是 给 已 经 有 的 一 系列 方法 或 函数 做 一 个 封装 ， 以 便 在 其 他 地 方 重复 使 
用 ,方便 后 期 维护 。 随 着 jQuery 的 广泛 使 用 ， 已 经 出 现 了 大 量 jQuery 插件 ， 如 thickbox、 
iFX 和 jQuery-googleMap 等 ， 简 单 地 引用 这 些 源 文件 就 可 以 方便 地 使 用 这 些 插件 。 

jQuery 除了 提供 一 个 简单 、 有 效 的 方式 进行 管理 元 素 以 及 脚本 外 ， 还 提供 了 添加 方法 和 
额外 功能 到 核心 模块 的 机 制 。 通 过 这 种 机 制 ，jQuery 允许 用 户 创建 属于 自己 的 插件 ， 提 高 开 
发 过 程 中 的 效率 。 


21.1.2 ”案例 1 一 一 如 何 使 用 插件 


由 于 jQuery 插件 其 实 就 是 JavaScript 包 ， 所 以 使 用 方法 比较 简单 ， 基 本 步骤 如 下 。 

EC 将 下 载 的 插件 或 者 自 定 义 的 插件 放 在 主 jQuery 源 文件 下 ， 然 后 在 <head> 标 记 中 
引用 插件 JavaScript 文件 和 jQuery 库 文件 。 

包含 一 个 自 定义 的 JavaScript 文件 ， 并 在 其 中 使 用 插件 创建 的 方法 。 

下 面 通过 一 个 实例 来 讲解 具体 的 使 用 方法 。 

ET 用 户 可 以 到 官方 网 站 下 载 jquery.formjs 文件 ， 然 后 放 在 网 站 目录 下 。 

创建 服务 器 端 处 理 文件 21.1.aspx 文件 ， 然 后 放 在 网 站 目录 下 ， 具 体 代码 如 下 。 
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> 


<%@ Import Namespace="System.Data" %> 
< 多 








Response .CacheControl = "no-cache"7 
Response.AddHeader ("Pragma", "no-cache"); 
string back = ""; 

back += "用 户 : "+Request["name"]; 
back += "<br>"; 
back += "评论 : "+Request ["comment"]; 
Response.Write (back); 

%> 

SS 了 TRY 新 建 网 页 文件 21.1.html， 在 <head> 部 分 引入 jQuery 库 和 Form 插件 库 文件 ， 具 

体 代码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 


<script src="jquery.min.js"></script> 
<script src="jquery.form.js"></script> 
<script> 

// 等 待 加 载 

$ (document) .ready (function() { 


// 给 myForm 绑 定 一 个 回调 函数 


售 402 


$('#myForm') .ajaxForm(function() { 
alert (" 恭 喜 ， 评 论 发 表 成 功 ! "); 
Ds 
]) 7 
</script> 
</head> 
<body> 
<form id="myForm" action="19.1.aspx" method="post"> 
用 户 名 : <input type="text" name="name" /> 
</br> 
评论 内 容 : <textarea name="comment"></textarea> 
<input type="submit"” value=" 发 表 评论 " /> 
</form> 
</body> 


在 正 9.0 中 浏览 页 面 ， 输 入 用 户 名 和 评论 内 容 后 ， 单 击 【发 表 评 论 】 按 钮 ， 效 果 如 图 21-1 
所 示 。 
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图 21-1 程序 运行 结果 


21.2 ”流行 的 插件 


在 jQuery 官方 网 站 中 有 很 多 现成 的 插件 ， 在 官方 主页 中 单 击 Plugins 超 链 接 ， 即 可 在 打开 
的 页 面 中 查看 和 下 载 jQuery 提供 的 插件 ， 如 图 21-2 所 示 。 本 章 将 介绍 目前 比较 流行 的 插件 。 
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We recommend movng to npm, using query-pugrr” as the heyword in your 
Package jsor. The npm blog has instructons for publishing your luan to 














图 21-2 插件 下 载 页 面 
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21.2.1 案例 2 一 一 QueryUl 插件 


jQueryUI 是 一 个 基于 jQuery 的 用 户 界面 开发 库 ， 主 要 由 UI 小 部 件 和 CSS 样式 表 集 合 而 
成 ， 它 们 被 打包 到 一 起 以 完成 常用 的 任务 。 

在 下 载 jQueryUI 包 时 ， 还 需要 注意 其 他 一 些 文件 。development-bundle 目录 下 包含 了 
demonstrations 和 documentation， 和 它们 虽然 有 用 但 不 是 产品 环境 部 署 所 必需 的 。 但 是 ， 在 
css 和 js 目录 下 的 文件 ， 必 须 部 署 到 Web 应 用 程序 中 。js 目录 包含 jQuery 和 jQueryUI 
库 ; 而 css 目录 包括 CSS 文件 和 所 有 生成 小 部 件 和 样式 表 所 需 的 图 片 。 

UI 插件 主要 可 以 实现 鼠标 互动 、 包 括 拖 上 忠 、 排 序 、 选 择 和 缩放 等 效果 ， 另 外 还 有 折 车 菜 
单 、 日 历 对话 框 、 滑 动 条 、 表 格 排序 、 页 签 、 放 大 镜 效果 和 阴影 效果 等 。 

下 面 通 过 拖 昂 实 例 来 讲解 具体 的 使 用 方法 。 

jQuery UI 提供 的 API 极 大 简化 了 拖 抱 功能 的 开发 。 只 需要 分 别 在 拖 电源 (sourcej) 和 目标 
(target) 上 调用 draggable0 函 数 即 可 。 

【 例 21.1】( 实 例文 件 ，ch21\21.1.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title>draggable()</title> 

<style type="text/css"> 

<!-- 

.blockt{ 

border:2px solid #760022; 
background-color:#ffb5bb; 
width:80px; height:25px; 
margin:5px; float:left; 
padding:2lpx; text-align:center; 
font-size:14px; 























} 
--> 
</style> 
<script language="javascript" src="jquery.ui/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script language="javascript" src: query.ui/ui.mouse.js"></script> 
<script language="javascript" src="jquery.ui/ui.draggable.js"></script> 
<script language="javascript"> 
$ (function(){ 

for (var i=0;i<2;i++) { // 添 加 两 个 <div> 块 

$ (document .body) .append ($ ("<div class='block'> 拖 块 

"+i.tostring()+"</div>") .css ("opacity",0.6)); 

} 

$(".block") .draggable (); 
Ys 
</script> 
</head> 
<body> 
</body> 
</html> 





全 


在 下 9.0 中 浏览 页 面 ， 按 住 拖 块 拖 动 ， 即 可 将 其 拖 抱 到 指定 的 位 置 ， 效 果 如 图 21-3 所 示 。 
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图 21-3 ”程序 运行 结果 


21.2.2 ”案例 3 一 一 Form 插件 


jQuery Form 插件 是 一 个 优秀 的 AJAX 表单 插件 ， 可 以 非常 容易 地 使 HTML 表单 支持 
AJAX。jQuery Form 有 两 个 核心 方法 : ajaxForm() 和 ajaxSubmit0， 它 们 集合 了 从 控制 表单 元 
素 到 决定 如 何 管理 提交 进程 的 功能 。 另 外 ， 插 件 还 包括 其 他 的 一 些 方法 ， 如 formToArray()、 
formSerialize0、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm() 方 法 等 。 


IGG 





1. ajaxForm() 方 法 


ajaxForm() 方 法 适用 于 以 提交 表单 方式 处 理 数据 ， 需 要 在 表单 中 标明 表单 的 action、id、 
method 属性 ， 最 好 在 表单 中 提供 submit 按钮 。 此 方式 大 大 简化 了 使 用 AJAX 提交 表单 时 的 数 
据 传 递 问题 ， 不 需要 逐个 以 JavaScript 的 方式 获取 每 个 表单 属性 的 值 ， 并 且 也 不 需要 通过 
URL 重 写 的 方式 传递 数据 。ajaxForm() 方 法 会 自动 收集 当前 表单 中 每 个 属性 的 值 ， 然 后 以 表单 
提交 的 方式 提交 到 目标 URL。 以 这 种 方式 提交 数据 较 安 全 ， 并 且 使 用 简单 ， 不 需要 元 余 的 
JavaScript 代码 。 

使 用 ajaxForm0) 方 法 时 ， 需 要 在 document 的 ready0 函 数 中 ， 使 用 ajaxForm0 方 法 为 
AJAX 提交 表单 进行 准备 。ajaxForm() 方 法 接受 0 个 或 1 个 参数 。 单 个 的 参数 既 可 以 是 一 个 回 
调 函 数 ， 也 可 以 是 一 个 Options 对 象 。 代 码 如 下 。 

<script> 

$ (document) .ready (function() { 
// 给 myFormId 绑 定 一 个 回调 函数 
$('#myFormId') .ajaxForm(function() { 
alert ("成 功 提交 !") ; 
nD; 


Fy 
</script> 


2.ajaxSubmit() 方 法 


ajaxSubmit0 方 法 适用 于 以 事件 机 制 提交 表单 ， 如 通过 超 链 接 、 图 片 的 click 事件 等 提交 表 
单 。 该 方法 作用 与 ajaxForm0 方 法 类 似 ， 但 更 为 灵活 ， 因 为 其 依赖 于 事件 机 制 ， 只 要 有 事件 存 
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在 就 能 使 用 该 方法 。 使 用 ajaxSubmit0 方 法 时 只 需要 指定 表单 的 action 属性 即 可 ， 不 需 提供 
submit 按钮 。 

在 使 用 jQuery 的 Form 插件 时 ， 多 数 情况 下 调用 ajaxSubmit0 方 法 对 用 户 提交 表单 进行 响 
应 。ajaxSubmit() 方 法 接受 0 个 或 1 个 参数 ， 这 个 单个 的 参数 既 可 以 是 一 个 回调 函数 ， 也 可 以 
是 一 个 Options 对 象 。 一 个 简单 的 例子 如 下 。 

$ (document) .ready (function(){ 

$('#btn') .click(function(){ 
$('#registerForm') .ajaxSubmit (function (data) { 
alert (data); 


Ds; 
return false; 





]) 7 
Ds; 
上 述 代码 通过 表单 中 id 为 btm 按钮 的 click 事件 触发 ， 并 通过 ajaxSubmit0 方 法 以 异步 
AJAX 方式 提交 表单 到 表单 的 action 所 指 路 径 内 。 
简单 来 说 ， 通 过 Form 插件 的 这 两 个 核心 方法 ， 都 可 以 在 不 修改 表单 的 HTML 代码 结构 
的 情况 下 ， 轻 易 地 将 表单 的 提交 方式 升级 为 AJAX 提交 方式 。 当 然 ，Form 插件 还 有 很 多 方 
法 ， 这 些 方法 可 以 帮助 用 户 很 容易 地 管理 表单 数据 和 表单 提交 。 


21.2.3 ”案例 4 一 一 提示 信息 插件 


在 网 站 开发 过 程 中 ， 有 时 想 要 实现 对 一 篇 文章 中 关键 词 部 分 的 提示 ， 也 就 是 当 上 鼠标 移动 
到 这 个 关键 词 时 ， 会 弹出 相关 的 一 段 文字 或 图 片 的 介绍 ， 就 需要 使 用 jQuery 的 clueTip 插件 
来 实现 。 

clueTip 是 一 个 jQuery 工具 提示 插件 ， 可 以 方便 为 链接 或 其 他 元 素 添 加 Tooltip 功能 。 当 
链接 包括 title 属性 时 ， 内 容 将 变 成 clueTip 的 标题 。clueTip 中 显示 的 内 容 可 以 通过 AJAX 获 
取 ， 也 可 以 从 当前 页 面 中 的 元 素 中 获取 ， 有 具体 操作 步骤 如 下 : 

ES 引入 jQuery 库 与 clueTip 插件 的 JavaScript 文件 。 插 件 的 下 载 地 址 为 

http://plugins.learningjquery.com/cluetip/demo/。 引 用 插件 的 JavaScript 文件 如 下 。 


<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" /> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script src="jquery.cluetip.js" type="text/javascript"></script> 


建立 HTML 结构 ， 代 码 如 下 。 


<!-- use ajax/ahah to pull content from fragment.html: --> 
<p> 

<a class="tips" href="fragment .html"” rel="fragment.html">show me 
the cluetip!</a> 


</p> 

<!-- use title attribute for clueTip contents, but don't include 
anything in the clueTip's heading --> 

<p> 


<a id="houdini™ href="houdini.html" title="|Houdini was an 
escape artist.|He was also adept at prestidigitation.">Houdini</a> 
</p> 


G4 


初始 化 插件 ， 代 码 如 下 。 


$ (document) .ready (function() { 
$('a.tips') .cluetip(); 
$('#houdini') .cluetip({ 
splitTitle: "|', // 使 用 调用 元 素 的 title 属性 来 


填充 clueTip, 在 有 "1" 的 地 方 将 内 容 分 裂 成 独立 的 div 
showTitle: false // 隐藏 clueTip 的 标题 


ts 
]) 7 


21.2.4 ”案例 5 一 一 jcarousel 插件 


jcarousel 是 一 款 jQuery 插件 ， 用 来 控制 水 平 或 垂直 排列 的 列表 项 ， 如 图 21-4 所 示 的 滚 
动 切 换 效果 。 单 击 左右 两 侧 的 箭头 可 以 向 左 或 者 向 右 查看 图 片 。 当 到 达 第 一 张 图 片 时 ， 左 边 
的 箭头 变 为 不 可 用 状态 ， 当 到 达 最 后 一 张 图 片 时 ， 右 边 的 箭头 变 为 不 可 用 状态 。 


CO a 2p- ecxlaceeesn -| 
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Wa 





图 21-4 ”图 片 滚动 切换 效果 
使 用 的 相关 代码 如 下 。 


<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script> 
<script type="text/javascript" 
src="../1lib/jquery.jcarousel.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" /> 
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> 
<script type="text/javascript"> 
jQuery (document) .ready (function() { 

jQuery ('#mycarousel') .jcarousel (); 
]) 


21.3 自 定 义 的 插件 


除了 可 以 使 用 现成 的 插件 以 外 ， 用 户 还 可 以 自 定义 插件 。 下 面 开始 讲述 自 定义 插件 的 方 
法 和 技巧 。 
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21.3.1 插件 的 工作 原理 


jQuery 插件 的 机 制 很 简单 ， 就 是 利用 jQuery 提供 的 jQuery fn.extend0 和 jQuery extendO 
方法 ， 扩 展 jQuery 的 功能 。 知 道 了 插件 的 机 制 之 后 ， 编 写 插件 就 容易 了 ， 只 要 按照 插件 的 机 
制 和 功能 要 求 编写 代码 ， 就 可 以 实现 自 定义 功能 的 插件 。 

而 要 按照 机 制 编写 插件 ， 还 需要 了 解 插件 的 种 类 ， 插 件 一 般 分 为 3 类 : 封装 对 象 方法 插 
件 、 封 装 全 局 函数 插件 和 选择 器 插件 。 


1. 封装 对 象 方法 插件 


该 类 插件 是 将 对 象 方法 封装 起 来 ， 用 于 对 通过 选择 器 获取 的 jQuery 对 象 进行 操作 ， 是 最 
常见 的 一 种 插件 。 该 类 插件 可 以 发 挥 出 jQuery 选择 器 的 强大 优势 ， 有 相当 一 部 分 的 jQuery 的 
方法 ， 都 是 在 jQuery 脚本 库 内 部 通过 这 种 形式 “ 插 ” 在 内 核 上 的 ， 如 parent0 方 法 和 
appendTo() 方 法 等 。 


2. 封装 全 局 函数 插件 
可 以 将 独立 的 函数 加 到 jQuery 命名 空间 下 。 添 加 一 个 全 局 函数 ， 只 需 如 下 定义 即 可 。 


jQuery.foo = function() { 


alert ('" 这 是 函数 的 具体 内 容 .') ; 
] 


当然 ， 用 户 也 可 以 添加 多 个 全 局 函数 ， 代 码 如 下 。 


jQuery.foo = function() { 

alert (' 这 是 函数 的 具体 内 容 .'); 

}; 

jQuery.bar = function(param) { 

alert (' 这 是 另外 一 个 函数 的 具体 内 容 " . " ) ; 

}; 

调用 时 和 调用 一 个 函数 的 方法 是 一 样 的 ， 使 用 jQuery.foo0:jQuerybar0; 或 者 
$.foo();$.bar('bar"): 语 句 调用 。 

例如 ， 常 用 的 jQuery.ajax0 方 法 、 去 首尾 空格 的 jQuery.trim0 方 法 ， 都 是 jQuery 内 部 作为 
全 局 函数 的 插件 附加 到 内 核 上 的 。 


3. 选择 器 插件 


虽然 jQuery 的 选择 器 十 分 强大 ， 但 在 少数 情况 下 ， 还 会 需要 用 到 选择 器 插件 来 扩充 一 些 
自己 喜欢 的 选择 器 。 

jQuery.fn.extend0 多 用 于 扩展 上 面 提 到 的 3 种 类 型 中 的 第 一 种 ，jQuery.extend() 用 于 扩展 
后 两 种 插件 。 这 两 个 方法 都 接受 一 个 参数 ， 类 型 为 Object。Object 对 象 的 “名 / 值 对 ”分 别 代 
表 “ 函 数 或 方法 名 /函数 主体 ”。 


21.3.2 ”案例 6 一 一 自 定义 一 个 简单 的 插件 
下 面 通过 一 个 例子 来 讲解 如 何 自 定 义 一 个 插件 。 定 义 的 插件 功能 是 : 在 列表 元 素 中 ， 当 





鼠标 指针 在 列表 项 上 移动 时 ， 其 背景 颜色 会 根据 设 定 的 颜色 而 改变 。 
【 例 21.2】 一 个 简单 的 插件 示例 (实例 文件 : ch21\21.2.html、21.2.js) 
21.3js 对 应 的 插件 代码 如 下 。 


/// <reference path="jquery.min.js"/> 


功能 : 设置 列表 中 表 项 获取 鼠标 指针 焦点 时 的 背景 色 
参数 ，1i_col【 可 选 】 鼠 标 指针 所 在 表 项 行 的 背景 色 
返回 原 调用 对 象 
» $("ul") .focusColor ("red"); 
; (function($) { 
$.fn.extend({ 
"focusColor": function(li col) { 
var def _col = "#ccc"; // 默 认 获取 焦点 的 色 值 
var 1st_col = "#fff"; // 默 认 丢 失 焦点 的 色 值 
// 如 果 设 置 的 颜色 不 为 空 ， 使 用 设置 的 颜色 ， 和 否则 为 默认 色 
li col = (li col == undefined) ? def col : 1i col; 
$ (this) .find("1i") .each (function() { // 遍 历 表 项 <1i> 中 的 全 部 元 素 
$ (this) .mouseover (function() { // 获 取 鼠 标 指针 焦点 事件 
$(this) .css("background-color", 1i col); // 使 用 设置 的 颜色 
}) .mouseout (function () { // 鼠 标 焦点 移出 事件 
$(this) .css ("background-color",，"#fff"); // 恢 复原 来 的 颜色 
}) 
}) 
return $ (this); // 返 回 jQuery 对 象 ， 保 持 链 式 操作 
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} 
有 
}) (jQuery); 


不 考虑 实际 的 处 理 逻 辑 时 ， 该 插件 的 框架 如 下 。 
7 (function($) { 
$.fn.extend({ 


"focusColor": function(li col) { 


// 各 种 默认 属性 和 参数 的 设置 


$ (this) .find("1i") .each (function() { // 遍 历 表 项 <1i> 中 的 全 部 元 素 
// 插 件 的 具体 实现 逻辑 


计 
return $(this); // 返 回 jQuery 对 象 ， 保 持 链 式 操作 
} 
hs 
}) (jQuery); 


各 种 默认 属性 和 参数 设置 的 处 理 中 ， 创 建 颜色 参数 以 允许 用 户 设 定 自己 的 颜色 值 ， 并 根 
据 参数 是 否 为 空 来 设 定 不 同 的 颜色 值 ， 代 码 如 下 。 


var def col = "#ccc"; // 默 认 获取 焦点 的 色 值 
var lst col = "#fff"; // 默 认 丢失 焦点 的 色 值 
// 如 果 设 置 的 颜色 不 为 空 ， 使 用 设置 的 颜色 ， 否 则 为 默认 色 


li col= (i col == undefined) 2 def col 2 col2 
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在 遍历 列表 项 时 ， 针 对 鼠标 指针 移入 事件 mouseoverO 设 定 对 象 的 背景 色 ， 并 且 在 鼠标 指 
针 移出 事件 mouseout0 中 还 原 原 来 的 背景 色 ， 代 码 如 下 。 
$ (this) .mouseover (function() { // 获 取 鼠 标 指针 焦点 事件 
$ (this) .css("background-color"，1i_col); // 使 用 设置 的 颜色 


}) .mouseout (function() { // 鼠 标 指针 焦点 移出 事件 
$(this) .css ("background-color",，"#fff"); // 恢 复原 来 的 颜色 





}) 


当 调 用 此 插件 时 ， 需 要 先 引 入 插件 的 js 文件 ， 然 后 调用 该 插件 中 的 方法 。 
示例 的 HTML 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 简 单 的 插件 示例 </title> 
<script type="text/javascript" src="jquery.min.js"> 
</script> 
<script type="text/javascript" src="21.3.js"> 
</script> 
<style type="text/css"> 
body{font-size:12px} 
.divFrame{width:260px;border:solid lpx #666} 
.divFrame .divTitle{padding:5px;background-color:#eee;font— 
weight:bold} 
.divFrame .divContent{padding:8px;line-height:1.6em} 
.divFrame .divContent ul{padding:0px;margin:0px;list-style-— 
type:none} 
.divFrame .divContent ul li span{margin-right:21px} 
</style> 
<script type="text/javascript"> 
$(function() { 
$("#ul") .focuscolor ("red");// 调 用 自 定义 的 插件 





}) 
</script> 
</head> 
<body> 
<div class="divFrame"> 
<div class="divTitle"> 
对 象 级 别 的 插件 
</div> 
<div class="divContent"> 
<ul id="ul"> 
<1i><span> 张 三 </span><span> 男 </span></1i> 
<1i><span> 李 四 </span><span> 女 </span></1i> 
<1i><span> 王 五 </span><span> 男 </span></1i> 
</ul> 
</div> 
</div> 


</body> 
</html> 


在 下 9.0 中 浏览 页 面 效果 如 图 21-5 所 示 。 
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21-5 ”程序 运行 结果 


21.4 ”综合 案例 一 一 创建 拖 邱 购物 车 效果 


jQueryUI 插件 除了 提供 了 draggable0 方 法 来 实现 鼠标 的 拖 忠 功能 ， 还 提供 了 一 个 
droppable() 方 法 实现 接收 容器 ， 通 过 该 方法 ， 可 以 实现 购物 的 拖 电 效 果 。 
【 例 21.3】( 实 例文 件 : ch21\21.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>droppable()</title> 

<style type="text/css"> 

Es 

.draggable{ 
width:70px; height:40px; 
border:2px solid; 
padding:10px; margin:S5px; 
text-align:center; 





上 

.green{ 
background-color:#73d216; 
border-color:#4e9a06; 

} 

.red{ 
background-color:#ef2929; 
border-color:#cc0000; 

} 

-droppable { 
position:absolute; 
right:21px; top:21px; 
width:400px; height:300px; 
background-color:#b3a233; 
border:3px double #cl17d11; 
padding:5px; 
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text-align:center; 


一 -> 
</style> 
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script> 
<script language="javascript" src="jquery.ui/ui.base.min.js"></script> 
<script language="javascript" src="jquery.ui/ui.draggable.min.js"></script> 
<script language="javascript" src="jquery.ui/ui.droppable.min.js"></script> 
<script language="javascript"> 
$ (function(){ 

$(".draggable") .draggable ({helper:"clone"}); 

$("#droppable-accept") .droppable ({ 

accept: function(draggable){ 
return $ (draggable) .hasClass ("green"); 





js 
drop: function(){ 


$ (this) .append ($ ("<div></div>") .html ("成 功 添加 到 购物 车 ! ") ) 


[22 
]) 
</script> 
</head> 
<body> 
<div class="draggable red"> 冰 箱 </div> 
<div class="draggable green"> 空 调 </div> 
<div id="droppable-accept" class="droppable"> 购 物 车 <br></div> 
</body> 
</html> 


在 正 9.0 中 浏览 页 面 ， 按 住 拖 块 拖 动 ， 即 可 将 其 拖 忠 到 指定 的 购物 车 中 ， 效 果 如 图 21-6 


所 示 。 
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图 21-6 程序 运行 结果 


21.5 高 手 甜 点 


甜点 1: 编写 jQuery 插件 需要 注意 什么 ? 


插件 的 推荐 命名 方法 为 :jquery.[ 插 件 名 ].js。 
所 有 的 对 象 方法 都 应 当 附加 到 jQuery.tm 对 象 上 ， 而 所 有 的 全 局 函数 都 应 当 附加 到 
jQuery 对 象 本 身 。 

@ 在 插件 内 部 ，this 指向 的 是 当前 通过 选择 器 获取 的 jQuery 对 象 ， 而 不 像 一 般 方法 那 
样 ， 内 部 的 this 指向 的 是 DOM 元 素 。 
可 以 通过 this.each 来 遍历 所 有 的 元 素 。 
所 有 方法 或 函数 插件 ， 都 应 当 以 分 号 结尾 ， 否 则 压缩 的 时 候 可 能 会 出 现 问 题 。 为 了 
更 加 保险 ， 可 以 在 插件 头 部 添加 一 个 分 号 (;)， 以 免 它 们 的 不 规范 代码 给 插件 带 来 
影响 。 

@ 插件 应 该 返回 一 个 jQuery 对 象 ， 以 便 保证 插件 的 可 链 式 操作 。 

@ ”避免 在 插件 内 部 使 用 $ 作 为 jQuery 对 象 的 别名 ， 而 应 当 使 用 完整 的 jQuery 来 表示 ， 
这 样 可 以 避免 程 序 冲 突 。 

甜点 2: 如 何 避 免 插 件 函 数 或 变量 名 冲突 ? 


虽然 在 jQuery 命名 空间 中 ， 禁 止 使 用 了 大 量 的 JavaScript 函数 名 和 变量 名 ， 但 是 仍然 不 
可 避免 某 些 函数 或 变量 名 将 与 其 他 jQuery 插件 冲突 ， 因 此 需要 将 一 些 方法 封装 到 另 一 个 自 定 
义 的 命名 空间 内 。 例 如 下 面 的 用 空间 的 例子 : 


jQuery.myPlugin = { 

foo:function() { 

alert ('This is a test. This is only a test.'); 

] 

bar:function (param) { 

alert ('This function takes a parameter, which is "' + param + '".'); 
} 

}; 


采用 命名 空间 的 函数 仍然 是 全 局 函数 ， 调 用 时 采用 的 代码 如 下 : 


$.myPlugin.foo(); 
$.myPlugin.bar('baz'); 


目 书 灿 导 窒 否 放 吉 “ 册 1Z “和 
py HB! 


21.6” 跟 我 练 练 手 
练习 1 制作 一 个 使 用 插件 的 网 页 。 


练习 2: 制作 一 个 使 用 jQueryUI 插件 的 网 页 。 
练习 3: 制作 一 个 使 用 Form 插件 的 网 页 。 
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练习 4: 制作 一 个 使 用 提示 信息 插件 的 网 页 。 
练习 5: 制作 一 个 包含 自 定义 插件 的 网 页 。 
练习 6: 制作 一 个 实现 拖 昌 购物 车 效果 的 网 页 。 
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22.1 下 载 与 安装 Apache Cordova 


Apache Cordova 包含 了 很 多 移动 设备 的 API 接口 ， 通 过 调用 这 些 API， 制 作出 的 APP 与 
原生 APP 没有 区 别 ， 甚 至 更 加 美观 ， 客 户 普遍 接受 度 比较 高 。 本 节 主 要 讲述 下 载 与 安装 
Apache Cordova 的 方法 。 


22.1.1 案例 1 一 一 配置 Android 开发 环境 


在 Apache Cordova 之 前 ， 需 要 配置 Android 开发 环境 ， 主 要 需要 安装 以 下 3 个 工具 。 
1. 安装 Java 的 JDK 


进入 Java 的 JDK 下 载 地 址 http://www.oracle.conytechnetwork/java/javase/downloads/index.html, 
如 图 22-1 所 示 ， 单 击 页 面 中 的 DOWNLOAD 图 标 。 
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Java SE Downloads 
单 击 此 图 标 
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图 22-1 Java 的 JDK 下 载 页 面 


进入 下 载 页 面 ， 选 中 Accept License Agreement 单 选 按钮 ， 然 后 根据 操作 系统 选择 不 同 的 
安装 平台 ， 如 选择 Windows x86 平台 ， 表 示 安 装 在 32 位 的 Windows 操作 系统 上 ， 单 击 jdk- 
8u91-windows-i586.exe 链接 即 可 下 载 文件 ， 如 图 22-2 所 示 。 

下 载 完成 后 按照 提示 步骤 安装 即 可 。 安 装 的 过 程 中 需要 注意 安装 路 径 ， 默 认 的 路 径 为 
C:\Program FilesWJavaNyjdk1.8.0_ 91\。 





2. 安装 Android SDK 


Android SDK 的 下 载 地 址 为 http://android-sdk.en.softonic.com/download, 进入 下 载 页 面 单 
击 Free Download 图 标 即 可 下 载 Android SDK， 如 图 22-3 所 示 。 

installer r24.0.2-windows.exe 下 载 完 成 后 即 可 进行 安装 操作 ， 安 装 时 设置 安装 路 径 为 
C:\Program Files\Android\android-sdk。 

安装 完成 后 ， 默 认 会 打开 SDK Manager， 选 中 Android SDK Tools、Android SDK 
platform-tools、Android SDK Build-tools 和 Android 7.0 (API 24) 复 选 框 ， 然 后 单 击 Install 5 
packages 按钮 ， 如 图 22-4 所 示 。 
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22-4 Android SDK Manager 窗口 





APP 和 移动 网 站 开发 
一 一 案例 课堂 四 一 





打开 选择 安装 包 的 窗口 ， 选 中 Accept License 单 选 按钮 ， 然 后 单 击 Install 按钮 开始 安装 ， 
如 图 22-5 所 示 。 





packages Package Description & License 
YW Android SDK License Padkage Description 要 
¥ Android SDK Tools revision 2511 。 Andrcid SDK Platform 24 国 


WW Android SDK Tools revision 252 Revision 2 
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¥ SDK Platform Android 7.0, AP1 24, See 78.3 MiB 
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Uicense 

Terms and Conditions 

This is the Android Software Development Kit License 
Agreement 


Orccept ORejoct Conyto cipboard| Drint @AcceptLicence 








图 22-5 选择 安装 包 的 窗口 


安装 完成 后 ， 打 开 如 图 22-6 所 示 的 提示 对 话 框 ， 表 示 已 经 安装 完成 ， 单 击 Close 按钮 关 
闭 该 对 话 框 即 可 。 


installed SDK Platiorm Android 7.0, AP1 24, revision 2 
Downloading Android SDK Tools, revision 25.17 
Installing Android SDK Tools, revision 25.17| 
Installed Android SDK Teols, revisicn 25.1.7 
Downloading Android SDK Tools revision 25.2rcl 
Installing Android SDK Tools, revision 25.2 rcl 


installed Android SDK Tools, revisicn 252 rel 
Stoppirg ADB server succeeded. 

(Starting ADB server succeeded. 

Done. 5 packages inctalled. 

po” loading packages. 








Done loading packages. 








图 22-6 ”提示 对 话 框 
3. 安装 Apache Ant 


Apache Ant 的 下 载 地 址 为 http://ant.apache.org/bindownload.cgi?， 进 入 下 载 页 面 后 单 击 
apache-ant-1.9.7-bin.zip 链接 即 可 下 载 文 件 ， 如 图 22-7 所 示 。 


Tar files in the distribution contain long flle names, and may 
require gnu tar to do the extraction. 


SHA1] [SHAS12] [MD5] 

。 .tar.gz archive: apache-ant-1.9.7-bin.tar.gz [PGP] 
[SHA1] [SHA512] [MD5] 

。 .tar.bz2 archive: apache-ant-1.9.7-bin.tar.bz2 
[PGP] [SHA1] [SHA512] [MD5] 


TTUTEE 


Older releases of Ant can be found here. We highly 
recommend to not use those releases but upgrade to Ant's 
latest release. 





22-7 ”Apache Ant 下 载 页 面 


将 下 载 的 文件 apache-ant1.9.7-bin.zip 解压 到 与 Android SDK 同一 目录 下 ， 也 就 是 
C:\Program Files\Androidvapache-ant-1.9. 和 目录 下 ， 如 图 22-8 所 示 。 
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22-8 解压 Apache Ant 到 指定 目录 下 


上 述 3 个 工具 安装 完成 后 ， 即 可 在 系统 环境 变量 中 设置 工具 的 路 径 ， 具 体操 作 步 又 如 下 。 
EEC 右 击 桌面 上 的 【计算 机 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【属性 】 命 令 ， 打 开 
【系统 】 窗 口 ， 如 图 22-9 所 示 。 
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22-9 【系统 】 窗 口 


EEID9 单 击 【高 级 系统 设置 】 链 接 ， 打 开 【 系 统 属性 】 对 话 框 ， 如 图 22-10 所 示 。 

TRY 单 击 【环境 变量 】 按 钮 ， 打 开 【 环 境 变 量 】 对 话 框 。 在 【Administrator 的 用 户 
变量 】 列 表 框 中 单 击 【新 建 】 按 钮 ， 如 图 22-11 所 示 。 

EC 打开 【新 建 用 户 变量 】 对 话 框 ， 在 【变量 名 】 文 本 框 中 输入 JAVA_HOME, 在 
【变量 值 】 文 本 框 中 输入 C:\Program Files\Javayjdk1.8.0 91， 单 击 【 确 定 】 按 钮 即 
可 ， 如 图 22-12 所 示 。 
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CD |] 
[CL 达 ][ 了 [IY [EE 己 随 
图 22-10 【系统 属性 】 对 话 框 图 22-11 【环境 变量 】 对 话 框 


国 于 BY 返回 到 【环境 变量 】 对 话 框 ， 采 用 同样 的 方法 ， 在 【Administrator 的 用 户 变 
量 】 列 表 框 中 单 击 【新 建 】 按 钮 ， 打 开 【 新 建 用 户 变量 】 对 话 框 ， 在 【变量 名 】 文 
本 框 中 输入 ANDROID HOME ， 在 【变量 值 】 文 本 框 中 输入 C:\Program Files\ 
Androidvandroid-sdk， 单 击 【确定 】 按 钮 即 可 ， 如 图 22-13 所 示 。 


ARDID_HDWE ] 
Ci\Progran Files\Android\android-s 


变量 名 0 ; JAVA_HDNE 变量 名 名 : 


变量 值 V); C:\Program Files\Java\jdkl. 8.0_91 变 里 值 0); 
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图 22-12 【新 建 用 户 变 量 】 对 话 框 22-13 ”添加 变量 ANDROID_HOME 


重复 上 一 步 操作 ， 添 加 变量 ANT HOME， 【变量 值 】 为 C:\Program Files\ 
Androidvapache-ant-1.9.7， 如 图 22-14 所 示 。 

重复 上 一 步 操作 ， 添 加 变量 Path， 变 量 值 如 下 。 
BJAVA HOMES\bin\;%ANT HOMES\bin\;%ANDROID HOME%\tools\;%ANDROID HOMES 
\platform-tools\ 


注意 每 个 路 径 变量 之 间 是 以 分 号 分 隔 的 ， 如 图 22-15 所 示 。 
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变量 值 ): C:AProran Files\Android\apache-ant- 
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图 22-14 添加 变量 ANT_HOME 22-15 ”添加 变量 Path 


EECDy 单 击 【 确 定 】 按 钮 ， 返 回 到 【环境 变量 】 对 话 框 ， 即 可 查看 添加 的 4 个 变量 ， 
如 图 22-16 所 示 。 


环境 变量 配置 完成 后 ， 可 以 检验 是 否 配置 成 功 ， 命 令 如 下 。 


java -version 
ant -version 
adb version 


在 命令 提示 符 窗口 中 输入 以 上 命令 ,检验 结果 如 图 22-17 所 示 。 
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图 22-16 【环境 变量 】 对 话 框 图 22-17 命令 提示 符 窗口 


22.1.2 ”案例 2 一 一 通过 npm 安装 Apache Cordova 


在 安装 Apache Cordova 之 前 ， 首 先 需要 安装 
NodeJS， 下 载 地 址 为 https://nodejs.org/， 进 入 下 载 Download for Windows (x86) 


页 面 后 ， 单 击 v6.3.0 Current 图 标 即 可 进行 下 载 并 v4.4.7 LTS 
安装 NodeJS， 如 图 22-18 所 示 。 WERE 


NodeJS 安装 完成 后 ， 就 可 以 使 用 npm 命令 安 Ce 
装 Apache Cordova 了 ， 上 有 具体 操作 步骤 如 下 。 

选择 【开始 】|【 所 有 程序 】| 【附件 】 选 项 ， 图 22-18 下 载 NodeJS 
然后 右 击 【命令 提示 符 】 选 项 ， 在 弹出 的 快捷 菜 
单 中 选择 【以 管理 员 身份 运行 】 命 令 ， 如 图 22-19 所 示 。 

在 打开 的 命令 提示 符 窗口 ， 输 入 安装 Apache Cordova 的 命令 如 下 。 


npm install -9 cordova 


安装 完成 后 结果 如 图 22-20 所 示 。 

NodeJS 安装 完成 后 ， 会 自动 增加 环境 变量 ， 如 果 上 述 命令 运行 错误 ， 需 检查 用 户 变量 或 
系统 变量 的 Path 变量 是 否 已 经 正确 设置 ， 默 认为 C:\Program Files\nodejs\。 

Apache Cordova 安装 完成 后 ， 仍 然 需 要 将 其 安装 目录 添加 到 环境 变量 中 ， 本 例 的 安装 目录 
为 CUsers\AdministratorAppData\Roamingmpm， 为 此 将 其 目录 添加 到 Path 变量 中 ， 如 图 22-21 
所 示 。 
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图 22-19 ”启动 【命令 提示 符 】 























22-20 安装 Apache Cordova 
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确定 取消 





图 22-21 【编辑 用 户 变量 】 对 话 框 
22.1.3 ”案例 3 一 一 设置 Android 模拟 器 


Android 模拟 器 可 以 模拟 移动 设备 的 大 部 分 功能 。 在 Android 文件 夹 中 找到 AVD 
Manager.exe 文件 并 运行 ， 在 打开 的 窗口 中 单 击 Create 按钮 ， 如 图 22-22 所 示 。 





二 
信人 2 








Android Virtual Devices 








Uist of existing Android Vinual Devices located at CNUsersAdministratorvandroidvavd 
AVD Nome Target Neme 
= NoAVD ovalable 





Platio.. Aplle.. CPU/ABL 


























22-22 ”AVD Virtual Device Manager 主 窗口 
在 打开 的 对 话 框 中 设置 模拟 设备 所 需要 的 软 、 硬 件 参数 ， 如 图 22-23 所 示 。 
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图 22-23 ”设置 模拟 设备 的 软 、 硬 件 参数 
对 话 框 中 各 个 参数 的 含义 如 下 。 
@ AVD Name: 自 定义 模拟 器 的 名 称 ， 便 于 识别 。 
Device: 选择 要 模拟 的 设备 。 


Target: 默认 的 Android 操作 系统 版 本 。 这 里 会 显示 SDK Manager 已 安装 的 版 本 。 
CPU/ABI: 处 理 区 规格 。 
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Keyboard: 是 否 显示 键盘 。 
Skin: 设置 模拟 设备 的 屏幕 分 辨 率 。 
Front Camera: 模拟 前 置 摄像 头 功能 。 
Back Camera: 模拟 后 置 摄像 头 功能 。 
Memory Options: RAM 用 于 设置 内 存 大 小 ，VM Heap 是 限制 APP 运行 时 分 配 的 内 
存 最 大 值 。 
e@ SD Card: 模拟 SD 存储 卡 。 
@ ”Snapshot: 是 否 需要 存储 模拟 器 的 快照 ， 如 果 存 储 快 照 ， 则 下 次 打开 模拟 器 就 能 缩短 
打开 时 间 。 
设置 完成 后 ， 单 击 OK 按钮 ， 即 可 产生 一 个 Android 模拟 器 ， 如 图 22-24 所 示 。 单 击 Start 
按钮 ， 即 可 启动 模拟 器 ， 单 击 Edit 按钮 还 可 以 重新 设置 模拟 器 的 软 、 硬 件 参数 。 

































































Tools 
Android Virtual Devices |Device Definitions 
List of existing Android Virtual Devices located at CAUsers\Administrator\android\avd 
AVD Name Target Name Platfo.. API Le.。 CPU/ABI Create… 
CtestApp Android7.0 70 24 Android TV Intel Atom (x. Start 
Ed 
Repair 
Delete 
Details-。 
[Refesh | 
A Arepairable Android Virtual Device, X An Android Virtual Device that failed to load. Click 'Details to see | 

















图 22-24 新 增 的 模拟 器 


22.2 ”综合 案例 一 一 将 网 页 转换 为 Android APP 


当 需 要 的 工具 安装 并 设置 完成 后 ， 就 可 以 在 DOS 窗口 中 使 用 命令 调用 Cordova 将 网 页 转 
换 为 APP， 基 本 思路 如 下 。 

(1) 创建 项 目 。 

(2) 添加 Android 平台 。 

(3) 导入 网 页 程序 。 

(4) 转化 为 APP。 

有 具体 操作 步骤 如 下 。 

EC 首先 切换 到 放置 项 目的 文件 夹 中 ， 例 如 项 目 放置 在 D:\APP 目录 下 ， 则 输入 命令 

如 下 。 


局 


>D: 
>cd APP 


运行 结果 如 图 22-25 所 示 。 
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图 22-25 程序 运行 结果 
ET23 创建 项 目 名 称 为 MyTest， 命 令 如 下 。 
cordova create test com.example.test MyTest 


其 中 参数 test 表示 文件 夹 的 名 称 ; 参数 com.example.test 为 APP id; 参数 MyTest 为 项 目 
的 名 称 ， 也 是 APP 的 名 称 。 执 行 结 果 如 图 22-26 所 示 。 
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22-26 ”创建 项 目 
创建 好 的 项 目的 文件 和 文件 夹 如 图 22-27 所 示 。 其 中 config.xml 为 项 目 参数 配置 文件 ， 





www 文件 夹 是 网 页 放置 的 文件 夹 。 
EEJSp 项 目 创建 完成 后 ， 必 须 指定 使 用 的 平台 ， 例 如 Android 平台 或 iOS 平台 。 首 先 
切换 到 项 目 所 在 的 文件 来， 命令 如 下 。 


cd test 
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图 22-27 项 目的 文件 和 文件 夹 
然后 创建 项 目 运行 平台 ,命令 如 下 。 


cordova platform add android 


执行 结果 如 图 22-28 所 示 。 














图 22-28 添加 项 目 运行 平台 


SYY 接着 需要 把 制作 好 的 移动 网 站 复制 到 www 文件 夹 下 ， 首 页 文件 名 称 默 认为 
indexl.html。 用 户 也 可 以 打开 项 目 文件 夹 中 的 config.xml ee 将 index.html 修改 为 
首页 文件 名 ， 修 改 语句 如 下 。 


<content src=”index.html” /> 


区 了 BY 执行 以 下 命令 创建 APP。 


cordova build 


如 果 既 想 创建 APP， 并 在 模拟 器 中 运行 APP， 可 以 执行 以 下 命令 。 


cordova run android 


运行 完成 后 ， 在 项 目 文件 夹 下 的 platforms/android/ant-build 文件 夹 下 可 以 找到 MyTest- 
debug.apk 文件 ， 该 文件 就 是 APP 的 安装 文件 包 ， 将 其 发 送 到 移动 设备 进行 安装 即 可 。 
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22.3 高 手 甜 点 


甜点 1: 配置 环境 时 如 果 Path 变量 已 经 存在 怎么 办 ? 


如 果 Path 变量 已 经 存在 ， 则 在 【环境 变量 】 对 话 框 中 选择 Path 变量 ， 然 后 单 击 【 编 辑 】 
按钮 ， 保 留 原 来 的 变量 值 ， 直 接 添 加 新 增 的 变量 值 ， 并 用 分 号 分 隔 即 可 。 


甜点 2: Android SDK 安装 老 是 出 错 怎么 办 ? 
在 安装 Android SDK 时 ， 经 常会 提示 以 下 错误 信息 ， 而 无 法 完成 安装 。 


Fetchin https://dl-ssl.google.com/android/repository/addons list-2.xml 
Failed to fetch URL https://dl- 
ssl.google.com/android/repository/addons list- 

2.xml, reason: peer not authenticated 

Fetched Add-ons List successfully 

Fetching URL: https://dl-ssl.google.com/android/repository/repository-7.xml 
Failed to fetch URL https://dl- 
ssl.google.com/android/repository/repository- 

7.xml, reason: SSLPeerUnverified peer not authenticated 

Done loading packages. 


这 是 服务 器 无 法 连接 造成 的 ， 可 以 做 以 下 修改 。 在 Andriod SDK Manager 窗口 中 选择 
Tools 菜单 ， 在 弹出 的 下 拉 菜 单 中 选择 Settings 命令 ， 打 开 Andriod SDK Manager-Settings 对 话 
框 ， 在 HTTP Porxy Server 文本 框 中 输入 mirrors.neusoft.edu.cn， 在 HTTP Porxy Port 文本 框 中 
输入 “80”， 然 后 单 击 Close 按钮 ， 即 可 解决 上 述 问题 ， 如 图 22-29 所 示 。 


ddV 逮 淋 此 号 司 过 式 坟 册 zZ7 潜 日 





有 GZ 





Proxy Settings 
HTTP Proxy Server mirrors.neusoft.edu.cn 





HTTP Proxy Port 80 


Manifest Cache 
Directory: CAUsers\Administrator\android\cache 
Current Size: 94 XiB 


国 Use download cache Clear Cache 





Others 

国 Force https://... sources to be fetched using http://-.. 
Ask before restarting ADB 

园 Enable Preview Tools 








22-29 Andriod SDK Manager - Settings 对 话 框 
甜点 3: 对 于 已 经 创建 好 的 APP， 如 何 修改 项 目 名 称 ? 


当 APP 已 经 创建 完成 ， 如 果 此 时 还 想 修 改 项 目 名 称 和 APK 文件 夹 ， 可 以 打开 项 目 文 
件 夹 下 paltforms/android 文件 夹 下 的 build.xml 文件 和 www 文件 夹 下 的 config xml 文件 进行 
修改 。 
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APP 和 移动 网 站 开发 
案例 课堂 四 一 


练习 1: 
练习 2: 
练习 3: 
练习 4: 
练习 5: 





22.4” 跟 我 练 练 手 


配置 Android 开发 环境 ， 安 装 Java JDK、Android JDK 和 Apache Ant。 
配置 环境 变量 并 测试 环境 是 否 配置 成 功 。 

通过 npm 安装 Apache Cordova。 

设置 Android 模拟 器 。 

将 制作 好 的 网 页 程序 转化 为 APP 安装 文件 。 












































已 掌握 的 在 方 框 中 打 钩 ) 
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23.1 记 账 本 的 需求 分 析 


需求 分 析 是 开发 软件 的 必要 环节 。 下 面 来 分 析 














家 庭 记 账本 的 需求 。 EE CE 
(1) 用 户 可 以 新 增 一 个 账目 ， 添 加 账目 的 标题 由 

和 具体 信息 ， 系 统 将 自动 记录 添加 的 时 间 。 Ce 
(2) 在 首页 中 自动 按时 间 顺 序 排列 账目 信息 ， 有 

单 击 某 个 账目 标题 ， 可 以 查看 账目 的 具体 信息 。 u © 
G) 用户 可 以 删除 不 需要 的 账目 ， 并 且 在 删除 

步骤 中 可 以 查看 账目 的 具体 信息 。 由 © 
(4) 用 户 可 以 快速 搜索 账目 ， 搜 索 内 容 可 以 是 

账目 标题 或 者 账目 的 具体 信息 。 ed 





制作 完成 后 的 主页 效果 如 图 23-1 所 示 。 


23.2 数据库 分 析 


分 析 完 网 站 的 功能 后 ， 开 始 分 析 数 据 表 的 逻辑 结构 ， 然 后 创建 数据 表 。 下 面 开始 讲述 分 
析 和 创建 数据 库 的 方法 和 技巧 。 


23.2.1 分 析 数 据 库 


家 庭 记 账本 的 数据 库 名 称 为 jiatingbook， 其 包括 一 个 数据 表 cashbook。 数 据 表 cashbook 
的 逻辑 结构 如 表 23-1 所 示 。 


表 23-1 数据 表 cashbook 










字段 含义 
自动 编号 
记 账 标题 
记 账 金额 
记 账 详情 
记 账 时 间 


数据 类 型 
integer 
char(S0， 
char(50) 





字段 名 
























smoney 









content | text 





芒 | 芒 | 天 | 芒 | 市 
HH 
洪 





datetime 





date 


23.2.2 ”创建 数据 库 


分 析 数 据 表 的 结构 后 ， 即 可 创建 数据 库 和 数据 表 ， 代 码 如 下 。 


// 打 开 数 据 库 
Var dbSize=2*1024*1024; 


全 ‘0 


db = openDatabase('jiatingbook',''1.0'',"''bookdb'', dbSize); 
db.transaction (function (tx){ 

// 创 建 数据 表 

tx.executeSql ("CREATE TABLE IF NOT EXISTS cashbook (id integer PRIMARY 
KEY,title char(50),smoney char(50), content text,date datetime)"); 
1D); 


23.3” 记 账本 的 代码 实现 
下 面 来 分 析 记 账本 的 代码 是 如 何 实现 的 。 
23.3.1 设计 首页 


首页 中 主要 包括 新 增 记 账 、 删 除 按钮 、 搜 索 框 和 记 账 列表 ， 代 码 如 下 。 
<!-- 首 页 记 账 列 表 --> 


<div data-role="page"” id="home"> 
<div data-role="header" id="header"> 
<a href="#" data-icon="plus" class="ui-btn-right" id="new"> 新 增 记 账 
</a></div> 
<h1> 家 庭 记 账本 </h1> 
<div data-role="content"> 
<a href="#" data-icon="delete"” id="del"> 删 除 记 账 </a> 
<ul id="list" data-role="listview" data-inset="true" data-filter="true" 
data-filter-placeholder=" 快 速 搜 索 记 账 "></ul> 
</div> 
</div> 


记 账 本 列表 使 用 listview 组 件 ， 通 过 设置 data-filter="true"， 就 会 在 列表 上 方 显示 搜索 
框 ， 其 中 data-filter-placeholder 属性 用 于 设置 搜索 框 内 显示 的 内 容 ， 当 输入 搜索 内 容 后 ， 将 查 
询 出 相关 的 记 账 信息 ， 如 图 23-2 所 示 。 


aee | 家 庭 记 账 本 [© wan | 




















出 差 @ 
出 差 费用 
二 © 








图 23-2 ”查询 记 账 
23.3.2 ”新 增 记 账 页 面 
首页 中 的 【新 增 记 账 】 按 钮 上 绑 定 了 click 事件 去 触发 新 增 记 账 函数 addBook()。 


$("#new") .on ("click",addnew); 


全 
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单 击 【 新 增 记 账 】 按 钮 后 ， 通 过 addnew 函数 将 转换 到 页 面 id 为 addBook0 的 页 面 ， 然 后 
将 标题 和 内 容 先 清空 ， 最 后 通过 focus0 函 数 将 插入 点 置 入 到 标题 栏 中 ， 代 码 如 下 。 
$("#new") .on ("click",addnew); 


function addnew(){ 
$.mobile.changePage ("#addBook", {}); 





二 
$("#addBook") .on ("pageshow", function(){ 
$("#content") .val("")7 
$("#smoney") .val (""); 
SEL val 
$("#title") .focus (); 
Ds; 


为 了 实现 以 对 话 框 的 形式 打开 页 面 ， 将 addBook 页 面 的 data-role 属性 设置 为 dialog， 将 
id 设置 为 addBook， 代 码 如 下 。 


<div data-role="dialog" id="addBook"> 

<div data-role="header"> 
<h1> 新 增 记 账 </h1> 

</div> 

<div data-role="content"> 
<p> 账 目标 题 :<input type="text" id="title"></p> 
<p> 金 额 :<input type="text" id="smoney"></p> 
<p> 详 情 :<textarea cols="40" rows="6" id="content"></textarea></p> 
<hr> 





<a href="#" data-role="button" id="save"> 保 存 </a> </div> 
</div> 
上 面 的 代码 中 添加 了 两 个 文本 框 、 一 个 textarea 文本 框 和 一 个 保存 按钮 ， 效 果 如 图 23-3 


所 示 。 





Dd 





金额: 








详情 : 





























图 23-3 新 增 记 账 页 面 
内 容 输 入 完 后 ， 单 击 【 保 存 】 按 钮 ， 将 输入 的 数据 保存 到 数据 表 cashbook 中 ， 然 后 将 对 


全 2 


话 框 关 闭 ， 并 调用 bookListO 函 数 将 内 容 显示 到 首页 中 ， 代 码 如 下 。 


23.3.3” 记 账 列 表 页 面 

















$("#save") .on ("click", save); 
function save(){ 
Var title = $("#title") .val (); 
Var smoney = $("#smoney") .val(); 
var content = $("#content") .val (); 
db.transaction (function (tx){ 
// 新 增 数据 
tx.executeSql ("INSERT INTO cashbook (title, smoney contenty date) 
values(?,?,?,datetime('now', 

'localtime'))", [title,smoney,content],function(tx, result){ 
$('.ui-dialog') .dialog('close'); 
noteList(); 

}vfunction(e)1{ 


alert ("新 增 数据 错误 :"+e.message) 





nD; 
和 
} 


其 中 datetime(now', 'localtime'") 函 数 将 获取 当前 的 日 期 时 间 。 


记 账 列表 页 面 的 功能 是 将 数据 库 中 的 数据 显示 在 首页 上 ， 代 码 如 下 。 


function noteList(){ 
$ ("ul1") .empty(); 
Var note=""; 
db.transaction (function (tx){ 
// 显 示 cashbook 数据 表 的 全 部 数据 
tx.executeSql ("SELECT id,title,smoney,content,date FROM 
cashbook", [], function(tx, result){ 
if(result.rows.length>0){ 
for(var i = 0; i < result.rows.length; i++){ 
item = result.rows.item(i); 
note+="<]i id="+item["id"]+"><a 
href='#'><h3>"+item["title"]+"</h3><p>"+item["smoney"]+"</p</a></1i>"; 


py GB 1 


和 
$ ("#1ist") .append (note) 
$ ("#1ist") .listview('refresh'); 
}rfunction(e){ 
alert ("SELECT 语法 出 错 了 !"+e.message) 
Fa 
Ds; 
} 
Ds; 


其 中 select 命令 的 作用 是 将 数据 库 中 的 数据 查询 出 来 ， 然 后 用 <1i> 组 件 显示 数据 。 通 过 使 


j jQueryMoble 的 listview 组 件 实现 动态 更 新 列表 的 目的 ， 如 图 23-4 所 示 。 
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图 23-4 ” 记 账 列表 页 面 


23.3.4” 记 账 详情 页 面 
首页 中 的 记 账 列表 上 绑 定 了 click 事件 去 触发 查看 记 账 函数 show0。 


$("'#1ist') .on('click', ‘li',show); 


show0 函 数 的 代码 如 下 。 


function show()1{ 
$("#viewTitle") .html (""); 
$("#viewsmoney") .html ("") 7 
$("#ViewContent") .html (""); 
var value=parseInt ($ (this) .attr('id'))7 
db.transaction (function (tx){ 
// 显 示 cashbook 数据 表 的 全 部 数据 
tx.executeSql ("SELECT id,title,smoney,content,date FROM cashbook 
where id=?", [value], function(tx, result){ 
if(result.rows.length>0){ 
for(var i = 0; i < result.rows.length; i++){ 
item = result.rows.item(i); 
$("#viewTitle") .html (item["title"]); 
$("#viewSsmoney") .html (item["smoney"]); 
$("#viewContent") .html (item["content"]); 
$("#date") .html ("创建 日 期 : "+item["date"]); 
} 
} 
$.mobile.changePage ("#viewBook", {}); 
}rfunction(e){ 
alert ("SELECT 语法 出 错 了 !"+e.message) 
和 
]) 7 


} 
为 了 实现 以 对 话 框 的 形式 打开 页 面 ， 将 viewBook 页 面 的 data-role 属性 设置 为 dialog, 将 
id 设置 为 viewBook， 代 码 如 下 。 


<div data-role="dialog" id="viewBook"> 
<div data-role="header"> 
<hl id="viewTitle"> 记 账 </h1> 
</div> 


<div data-role="content"> 
<p id="viewsmoney"> 金 额 </p> 
<p id="viewContent"> 内 容 </p> 

</div> 

<div data-role="footer"> 
<p id="date"> 日 期 </p> 

</div> 

</div> 


选择 一 个 账目 标题 后 ， 显 示 的 详细 内 容 页 面 如 图 23-5 所 示 。 


4 月 份 出 差 到 北京 的 费用 。 





图 23-5 记 账 详情 页 面 


23.3.5 “删除 记 账 
首页 中 的 【删除 记 账 】 按 钮 上 绑 定 了 click 事件 去 触发 删除 记 账 函数 bookdel0。 


$("#del") .on("click",bookdel); 


函数 bookdel0 的 具体 内 容 如 下 。 


function bookdel(){ 
if($("button") .length<=0){ 
Var DeleteBtn = $("<button 
class='css btn class'>Delete</button>"); 
$("l1i:visible") .before (DeleteBtn); 





} 


单 击 【删除 记 账 〗】 按 钮 ， 将 在 每 条 列表 的 左边 显示 一 个 Delete 按钮 ， 如 图 23-6 所 示 。 


NS 











23-6 ”删除 记 账 页 面 
单 击 Delect 按钮 后 ， 将 会 弹出 确认 对 话 框 ， 如 图 23-7 所 示 。 
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localhost 
确定 要 执行 删除 ? 


图 23-7 删除 确认 对 话 杠 
实现 删除 数据 功能 的 代码 如 下 。 


$("#home") .on('click','.css btn class', function(){ 
if(confirm(" 确 定 要 执行 出 除 ?") ) { 
Var Value=$ (this) .next ("1i") .attr("id")7 
db.transaction (function (tx){ 
// 显 示 cashbook 数据 表 的 全 部 数据 
tx.executeSql ("DELETE FROM cashbook WHERE id=?", [value], 
function(tx, result){ 
noteList(); 
}vfunction(e)1{ 
alert ("DELETE 语法 出 错 了 !"+e .message) 
$ ("button") .remove(); 








程序 编写 完成 后 ， 可 以 将 其 封装 成 APK 文件 ， 然 后 在 移动 设备 上 进行 安装 。 家 庭 记 账 本 
的 完整 程序 包 如 下 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 家 庭 理 财 记 账 本 </title> 
<!-- 最 佳 化 屏幕 宽度 --> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 

<!-- 引 用 jQuery Mobile 函数 库 应 用 ThemeRoller 制作 的 样式 --> 

<link rel="stylesheet" href="themes/sweet.min.css" /> 

<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> 

<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" 
ys 

<script src="jquery/jquery-1.9.1.min.js"></script> 

<script src="jquery/jquery.mobile-1.4.5.min.js"></script> 


<style> 
#header{height:50px;font-size:25px;font-family: "微软 雅 黑 "} 
“Css btn class { 

float: lefts; 

padding: 0.6em; 

position:relative; 

display:block; 





0 刘 


z-index:10; 
font-size:16px; 
font-family:Arial; 
font-weight:normal; 
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
border-radius:8px; 
border:lpx solid #e65f44; 
padding:8px 18px; 
text-decoration:none; 
background:-moz-linear-gradient( center top, #f0c911 5%, #f2able 100% ); 
background: -ms-linear-gradient( top, #f0c91]1 5%, #f2able 100% ); 
filter:progid:DXxImageTransform.Microsoft .gradient (startColorstr="#f0c91 
1', endColorstr='#f2able'); 
background: -webkit-gradient( linear, left top, left bottom, color- 
stop(5%, #f£0c911), color-stop(100%, #f2able) ); 
background-color:#f0c911; 
color:#c92200; 
text-shadow:lpx lpx Opx #dedl7c; 
-webkit-box-shadow:inset lpx lpx Opx Opx #f9eca0; 
-moz-box-shadow:inset lpx lpx Opx Opx #f9eca07 
box-shadow:inset lpx lpx Opx Opx #f9eca0; 
}.css btn class:hover { 
background:-moz-linear-gradient( center top, #f2able 5%, #f0c911 100% ) 7 
background:-ms-linear-gradient( top, #f2able 5%, #f0c911 100% ); 
filter:progid:DxImageTransform.Microsoft .gradient (startColorstr="'#f2abl 
e', endColorstr='#f£0c911'); 
background: -webkit-gradient( linear, left top, left bottom, color- 
stop(5%, #f2able), color-stop(100%, #f£0c911) ); 
background-color:#f2able; 
}.css btn class:active { 
position:relative; 
top:1px; 
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} 

</style> 

<script type="text/javascript"> 
var db; 

$ (function(){ 


// 打 开 数 据 库 
var dbSize=2*1024*10247 
db = openDatabase(' jiatingbook ', ''1.0'',''bookdb'', dbsSize); 


db.transaction (function (tx){ 


// 创 建 数据 表 
tx.executeSql ("CREATE TABLE IF NOT EXISTS cashbook (id integer 
PRIMARY KEY,title char(50),smoney char(50),content text,date datetime)"); 


Ds; 


// 显 示 列 表 


noteList(); 


// 显 示 新 增 页 面 
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$("#new") .on ("click"vaddnew) 7 

function addnew(){ 
$.mobile.changePage ("#addBook", {}); 

} 

$ ("#addBook") .on ("pageshow", function(){ 
$("#content") .val (""); 
$("#smoney") .val (""); 
Stitle") valt™")y 
$("#title") .focus () 7 

]) 


// 新 增 

$("#save") .on ("click", save); 

function save(){ 
Var title = $("#title") .val (); 
Var smoney = $("#smoney") .val(); 
Var Content = $("#content") .val(); 





db.transaction (function (tx){ 
// 新 增 数据 
tx.executeSql ("INSERT INTO 
cashbook (title, smoney, content,date) values(?,?,?,datetime('now', 
'localtime'))", [title, smoney,content],function(tx, result){ 
$('.ui-dialog') .dialog('close'); 
noteList(); 
}rfunction(e){ 


alert ("新 增 数据 错误 : "+e .message) 


// 显 示 详细 信息 

St On ook Li rnows 

function show(){ 
$("#viewTitle") .html (""); 
$("#viewsmoney") .html (""); 
$("#viewContent") .html (""); 


Var value=parseInt ($ (this) .attr('id'))7 


db.transaction (function (tx){ 
// 显 示 cashbook 数据 表 的 全 部 数据 
tx.executeSsSql ("SELECT id,title,smoney,content,date FROM 
cashbook where id=?", [value], function(tx, result){ 
if(result.rows.length>0){ 
for(var i = 0; i < result.rows.length; i++){ 

item = result.rows.item(i); 
$ ("#viewTitle") .html (item["title"]); 
$("#viewsmoney") .html (item["smoney"]); 
$ ("#viewContent") .html (item["content"]); 
$ ("#date") -html ("创建 日 期 : "+item["date"]); 





$.mobile.changePage ("#viewBook", {}); 
},function(e){ 
alert ("SELECT 语法 出 错 了 !"+te.message) 


时 jtz 站 国 
证 


// 显 示 1ist 删除 按钮 
$("#del") .on ("click",bookde1) 7 
function bookdel(){ 
ifE($("button") .Jength<=0){ 
Var DeleteBtn = $("<button 
class='css btn class'>Delete</button>"); 
$("li:visible") .before (DeleteBtn); 


王将 ddv 证 深 可 | 





} 
3 
// 单 击 1ist 删除 按钮 


$("#home") .on('click','.css btn class', function(){ 
ifE(confirm(" 确 定 要 执行 网 除 ?") ) { 
Var Value=$ (this) .next("1i") .attr("id")7 
db.transaction(function (tx){ 
// 显 示 cashbook 数据 表 的 全 部 数据 
tx.executeSql ("DELETE FROM cashbook WHERE id=?", [value] 
function(tx, result)f{ 


GG 


noteList (); 

}rfunction(e){ 
alert ("DELETE 语法 出 错 了 ! "+e .message) 
$ ("button") .remove (); 





// 列 表 
function noteList(){ 
$ ("ul1") .empty (); 
var note=""; 


db.transaction (function (tx){ 
// 显 示 cashbook 数据 表 的 全 部 数据 
tx.executeSsSql ("SELECT id,title,smoney,content,date FROM 
cashbook", [], function(tx, result)f{ 
if(result.rows.length>0){ 
for(var i = 0; i < result.rows.length; i++){ 
item = result.rows.item(i); 
note+="<]1i id="+item["id"]+"><a 
href='#'><h3>"+item["title"]+"</h3><p>"+item["smoney"]+"</p</a></1i>"; 
} 
} 
$ ("#1ist") .append (note); 
$("#1ist") .listview('refresh'); 
}rfunction(e){ 
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alert ("SELECT 语法 出 错 了 !"+e.message) 


</script> 
</head> 
<body> 
<!-- 首 页 记 账 列 表 --> 
<div data-role="page" id="home"> 
<div data-role="header" id="header"> 








<a href="#" data-icon="plus" class="ui-btn-left" id="new"> 新 增 记 账 </a> 
<h1> 家 庭 记 账本 </h1> 
<a href="#" data-icon="delete"” id="del"> 删 除 记 账 </a> 

</div> 


<div data-role="content"> 
<ul id="list" data-role="listview" data-inset="true" data-filter="true" 
data-filter-placeholder=" 快 速 搜索 记 账 "></u1> 
</div> 
</div> 





<!-- 新 增 记 账 --> 
<div data-role="dialog" id="addBook"> 
<div data-role="header"> 
<h1> 新 增 记 账 </h1> 
</div> 
<div data-role="content"> 
<p> 账 目标 题 :<input type="text" id="title"></p> 
<p> 金 额 :<input type="text" id="smoney"></p> 
<p> 详 情 :<textarea cols="40" rows="8" id="content"></textarea></p> 
<hr> 
<a href="#" data-role="button"” id="save"> 保 存 </a> </div> 
</div> 


<!-- 记 账 详细 信息 --> 
<div data-role="dialog" id="viewBook"> 
<div data-role="header"> 
<hl id="viewTitle"> 记 账 </h1> 
</div> 
<div data-role="content"> 
<p id="viewsmoney"> 金 额 </p> 
<p id="viewContent"> 内 容 </p> 
</div> 
<div data-role="footer"> 
<p id="date"> 日 期 </p> 
</div> 
</div> 
</body> 
</html> 











店 、 查 询 订 
































。 通 过 本 章节 的 学 习 ， 用 户 可 以 了 解 在 线 订 购 系统 的 制作 


模拟 在 线 订购 和 查询 订单 的 方法 和 技巧 。 











节 将 学 习 一 个 酒店 订购 系统 的 开发 ， 这 里 将 使 用 前 面 学 习 的 localStorage 


来 处 理 订单 的 存储 和 查询 。 该 系统 主要 功能 为 订购 房间 、 查 询 连 锁 分 





单 、 查 看 酒店 介绍 等 功能 
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24.1 连锁 酒店 订购 的 需求 分 析 


需求 分 析 是 连锁 酒店 订购 系统 开发 的 必要 环节 ， 该 系统 的 需求 如 下 。 

(1) 用 户 可 以 预定 不 同 的 房间 级 别 ， 定 制 个 性 化 的 房间 ， 而 且 还 可 以 快速 搜索 自己 需要 
的 房间 类 型 。 

(2) 用 户 可 以 查看 全 国 连锁 酒店 的 分 店 情况 ， 并 且 可 以 自主 联系 酒店 的 分 店 。 

(3) 用 户 可 以 查看 预定 过 的 订单 详情 ， 还 可 以 删除 不 需要 的 订单 。 

(4) 用 户 可 以 查看 连锁 酒店 的 介绍 。 

制作 完成 后 的 主页 效果 如 图 24-1 所 示 。 


千 谷 连锁 酒店 系统 











订购 专线 : 12345678 
图 24-1 首页 效果 


24.2 ”网 站 的 结构 


分 析 完 网 站 的 功能 后 ， 开 始 分 析 整 个 网 站 的 结构 ， 主 要 分 为 以 下 5 个 页 面 ， 如 图 24-2 所 示 。 





连锁 酒店 首页 
index. html 


订购 页 面 连锁 分 店 页 面 | | 我 的 订单 页 面 酒店 介绍 页 面 
dinggou. htm] liansuo. html dingdan. html about. html 


24-2 ”网 站 的 结构 


各 个 页 面 的 主要 功能 如 下 。 

(1) index.html: 该 页 面 是 系统 的 主页 面 ， 主 要 是 网 站 的 入 口 ， 通 过 主页 可 以 链接 到 订购 
页 面 、 连 锁 分 店 页 面 、 我 的 订单 页 面 和 酒店 介绍 页 面 。 

(2) dinggou.html: 该 页 面 是 酒店 订购 页 面 ， 主 要 包括 3 个 页 面 ， 第 一 个 页 面 用 于 选择 房 
间 类 型 ， 第 二 个 页 面 主要 功能 是 选择 房间 的 具体 参数 ， 第 三 个 页 面 用 于 显示 订单 完成 信息 。 

(3) liansuo.html: 该 页 面 主要 显示 连锁 分 店 的 具体 信息 。 

(4) dingdan.html: 该 页 面 主要 显示 用 户 已 经 订购 的 订单 信息 。 

(5) about.html: 该 页 面 主要 显示 关于 连锁 酒店 的 介绍 。 





























24.3 ”连锁 酒店 系统 的 代码 实现 
下 面 来 分 析 连 锁 酒店 系统 的 代码 是 如 何 实现 的 。 


24.3.1 设计 首页 


首页 中 主要 包括 一 个 图 片 和 4 个 按钮 ， 分 别 连接 到 订购 页 面 、 连 锁 分 店 页 面 、 我 的 订单 
页 面 和 酒店 介绍 页 面 。 主 要 代码 如 下 : 


<div data-role="page" data-title="Happy" id="first" data-theme="a"> 
<div data-role="header"> 
<h1> 千 谷 连锁 酒店 系统 </h1> 
</div> 
<div data-role="content" id="content" class="firstcontent"> 

<img src="images/zhu.png" id="logo"><br/> 

<a href="dinggou.html" data-ajax="false" data-role="button" data- 
icon="home" data-iconpos="top" data-mini="true" data-inline="true"><img 
src="images/cai.png"><br> 立 即 预订 </a> 

<a href="liansuo.html" data-ajax="false" data-role="button" data- 
icon="search" data-iconpos="top" data-mini="true" data-inline="true"><img 
src="images/lian.png"><br> 连 锁 分 店 </a> 

<a href="dingdan.html" data-ajax="false" data-role="button" data-— 
icon="gear" data-iconpos="top" data-mini="true" data-inline="true"><img 
src="images/ding.png"><br> 我 的 订单 </a> 

<a href="about.html" data-ajax="false" data-role="button" data- 
icon="gear" data-iconpos="top" data-mini="true" data-inline="true"><img 
src="images/ding.png"><br> 关 于 千 谷 </a> 
</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> 

订购 专线 : 12345678 

</div> 
</div> 


其 中 data-ajax="false" 表 示 停 用 Ajax 加 载 网 页 ，data-role="button" 表 示 该 链接 的 外 观 以 按 
钮 的 形式 显示 ; data-icon="home" 表 示 按 钮 的 图 标 效果 ; data-iconpos="top" 表 示 小 图 标 在 按钮 
上 方 显示 ; data-inline="true" 表 示 以 最 小 宽度 显示 。 效 果 如 图 24-3 所 示 。 


避 间 
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24-3 ”链接 的 样式 效果 


其 中 页 脚 部 分 通过 设置 属性 data-position="fixed"， 可 以 让 页 脚 内 容 一 直 显 示 在 页 面 的 最 
下 方 。 通 过 设置 style="text-align:center"， 可 以 让 页 脚 内 容 居中 显示 ， 如 图 24-4 所 示 。 





订购 专线 ; 12345678 
24-4 ”页 脚 的 样式 效果 


23.3.2 ”订购 页 面 


订购 页 面 主要 包含 3 个 页 面 ， 主 要 包括 选择 房间 类 型 页 面 (id=first)、 选 择 房 间 的 具体 参数 
页 面 (id=second) 和 显示 订单 完成 信息 页 面 (id=third)。 


1. 选择 房间 类 型 页 面 


其 中 选择 房间 类 型 页 面 中 包括 房间 列表 、 返 回 到 上 一 页 按钮 、 快 速 搜索 房间 等 功能 。 代 
码 如 下 : 


<div data-role="page" data-title=" 房 间 列表 " id="first" data-theme="a"> 
<div data-role="header"> 
<a href="index.html" data-icon="arrow-l1" data-iconpos="]left" data- 
ajax="false">Back</a> <h1> 房 间 列 表 </h1> 
</div> 
<div data-role="content" id="content"> 
<ul data-role="listview" data-inset="true" data-filter="true" data-— 
filter-placeholder=" 快 速 搜 索 房间 "> 
< 
<a href="#second"> 
<img src="images/putong.png" /> 
<h3> 普 通 间 </h3> 
<p>24 小 时 有 热 水 </p> 
</a> 
<a href="#second" data-icon="plus"></a> 
</1i> 
六 半生 天 
<a href="#second"> 
<img src="images/wangluo.png" /> 
<h3> 网 络 间 </h3> 
<p> 有 网 络 和 电脑 、24 小 时 热 水 </p> 
</a> 
<a href="#second" data-icon="plus"></a> 


oz 举重 
1 


<11> 
<a href="#second"> 
<img src="images/zongtong.png" /> 
<h3> 总 统 间 </h3> 
<p>24 小 时 客服 、 有 了 网络 和 电脑 、24 小 时 热 水 、 免 费 提 供 三 餐 </p> 
</a> 
<a href="#second" data-icon="plus"></a> 


二 了 > 
</ul> 
</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> NN 


</IIS : 
i 上 
<a href="#second"> "| 
<img src="images/haohua.png" /> 过 站 

<h3> 豪 华 间 </h3> 锁 
<p> 免 费 提供 三 餐 、 有 网 络 和 电脑 、24 小 时 热 水 </p> 到 

</a> a] 

<a href="#second" data-icon="plus"></a> 出 

有 和 了 > 系 
统 

坟 

战 





订购 专线 : 12345678 
</div> 
</div> 


效果 如 图 24-5 所 示 。 





(@ 快 还 搜 索 房 问 








24-5 ”房间 列表 页 面 效 果 
页 面 中 有 一 个 Back 按钮 ， 主 要 作用 是 返回 到 主页 ， 通 过 以 下 代码 来 控制 : 


<a href="index.html" data-icon="arrow-l1" data-iconpos="left" data- 
ajax="false">Back</a> 


房间 列表 使 用 listview 组 件 ， 通 过 设置 data-filter="true"， 就 会 在 列表 上 方 显示 搜索 框 ; 
通过 设置 data-inset="true"， 可 以 让 listview 组 件 添加 圆 角 效果 ， 而 且 不 与 屏幕 同 宽 ; 其 中 
data-filter-placeholder 属性 用 于 设置 搜索 框 内 显示 的 内 容 ， 当 输入 搜索 内 容 时 ， 将 查询 出 相关 
的 房间 信息 ， 如 图 24-6 所 示 。 
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2. 选择 房间 的 具体 参数 页 面 


选择 房间 的 具体 参数 页 面 的 id 为 scond， 主 要 让 用 户 选择 楼 层 、 是 否 带 窗口 、 是 否 需 要 
接送 、 订 购 数量 和 设置 客户 联系 方式 ， 如 图 24-7 所 示 。 














图 24-6 ”快速 搜索 房间 图 24-7 选择 房间 页 面 


这 个 页 面 的 Back 按钮 的 设置 方法 和 上 一 个 page 不 同 ， 通 过 设置 属性 data-add-back- 
btn="true" 实 现 返 回 上 一 页 的 功能 ， 代 码 如 下 : 

<div data-role="page”data-title=" 选 择 房 间 " id="second" data-theme="a" data- 

add-back-btn="true"> 

该 页 面包 含 1 个 选择 菜单 (Select menu)、2 个 单 选 按 钮 组 件 (Radio button)、1 个 范围 滑 块 
(Slider)、 文 本 框 (text) 和 1 个 按钮 组 件 (button)。 

其 中 选择 菜单 (Select menu) 的 代码 如 下 : 


<div data-role="content" id="content"> 
选择 楼 层 : 
<select name="selectitem" id="selectitem"> 
<option value=" 一 楼 "> 一 楼 </option> 
<option value=" 二 楼 "> 二 楼 </option> 
<option value=" 三 楼 "> 三 楼 </option> 
</select> 


预览 效果 如 图 24-8 所 示 。 
2 个 单 选 按钮 组 的 代码 如 下 : 


<fieldset data-role="controlgroup"> 
<legend> 选 择 是 否 带 窗口 : </legend> 
<input type="radio" name="flavoritem" id="radio-choice-1" 
value=" 有 窗户 "checked /> 


<label for="radio-choice-1"> 有 窗户 </label> 

<input type="radio™" name="flavoritem" id="radio-choice-2"™ 
value=" 无 窗户 " /> 

<label for="radio-choice-2"> 无 窗户 </label> 
<fieldset data-role="controlgroupl"> 

<legend> 选 择 是 否 接送 : </legend> 

<input type="radio"”name="flaVvoriteml"” id="radio-choice-3" 
value=" 需 要 接送 " checked /> 

<label for="radio-choice-3"> 需 要 接送 </1label> 

<input type="radio" name="flavoriteml" id="radio-choice-4" 
value=" 无 需 接 送 " /> 

<label for="radio-choice-4"> 无 需 接 送 </1abel> 


预览 效果 如 图 24-9 所 示 。 

此 处 使 用 <fieldset> 标 记 创 建 单 选 按钮 组 ， 通 过 设置 属性 data-role="controlgroup"， 可 以 让 
各 个 单 选 按钮 外 观 像 一 个 组 合 ， 整 体 效果 比较 好 。 
选择 是 否 带 窗口 : 


选择 是 否 接送 : 





图 24-8 选择 菜单 效果 图 24-9 ” 单 选 按钮 组 效果 
范围 滑 块 的 代码 如 下 : 


<input type="range" name="num" id="num" Value="1"” min="0" max="100"” data-— 
highlight="true" /> 


预览 效果 如 图 24-10 所 示 。 
文本 框 的 代码 如 下 : 


<input type="text" name="textl" id="textl" size="10" maxlength="10" /> 


其 中 size 属性 用 于 设置 文本 框 的 长 度 ，maxlength 属性 用 于 设置 输入 文字 个 数 的 最 大 值 。 
预览 效果 如 图 24-11 所 示 。 
用 拓 邓 客户 联系 方式 : 


CH mn ( ) 


图 24-10 ”范围 滑 块 效果 图 24-11 文本 框 效 果 
确认 按钮 的 代码 如 下 : 


<input type="button" id="addToStorage” value=" 确 认 订单 " /> 


预览 效果 如 图 24-12 所 示 。 
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图 24-12 ”确认 按钮 效果 
3. 显示 订单 完成 信息 页 面 
显示 订单 完成 信息 页 面 的 代码 如 下 : 


<div data-role="page" id="third"> 

<div data-role="header"> 

<a href="index.html" data-icon="arrow-l1" data-iconpos="]left" data— 

ajax="false"> 回 首页 </a> <h1> 订 购 完成 </h1> 

</div> 

<div data-role="content" id="content"> 

<img src="images/ding.png" /><br> 

<font style="font-size:20px;"> 感 谢 您 选择 我 们 酒店 <br> 

以 下 为 您 的 订购 房间 信息 : </ font> 

<p><div id="message" style="font-size:25px;color:#ff0000"></div> 

</div> 

<div data-role="footer" data-position="fixed" style="text-align:center"> 
订购 专线 : 12345678 

</div> 

</div> 


预览 效果 如 图 24-13 所 示 。 








ps 

感谢 您 选择 我 们 酒店 

以 下 为 您 的 订购 房间 信息 : 
房间 楼 层 : 二 楼 

是 否 带 窗户 : 有 窗户 

是 否 需 接送 : 需要 接送 
房间 数量 : 26 


客户 联系 方式 : 123456789 
24-13 ”确认 按钮 效果 
接收 订单 的 功能 是 通过 JavaScript 来 完成 的 ， 代 码 如 下 : 


<script type="text/javascript"> 
var orderitem = "orderitem"; 
Var flavor = "itemflavor"; 
Var flavorl = "itemflavorl"; 
Var num = "num"; 
Var textl = "textl"; 
$("#second") .live('pagecreate', function() { 
$('#addTostorage') .click(function() { 
localstorage.orderitem=$ ("select#selectitem") .val (); 


全 


a 


localStorage.flavor=$ ('input [name="flavoritem"] :checked') .val (); 


localSstorage.flavorl=$ ('input [name="flavoriteml"] :checked') .val (); 
localStorage.num=$ ('#num') .val (); 
localStorage.textl1=$ ('#text1') .val (); 
$.mobile.changePage ($('#third'), {transition: 'slide'}); 
1D); 
i 
$('#third') .live('pageinit', function() { 
var itemflavor = "房间 楼 层 : "+ localStorage .orderitem+"<br> 
是 否 带 窗户 : "+localStorage. flavor+"<br> 是 否 需 接送 : "+localStorage.flavorl+"<br> 
房间 数量 : "+localStorage .num+"<br> 客 户 联系 方式 : 
"+localStorage.textl1; 
$('#message') .html (itemflavor); 
//document .getElementById("message") .innerHTML= itemflavor 
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]) 2 
</script> 
其 中 $ 符 号 代表 组 件 ， 例 如 $("#second") 表 示 id 为 second 的 组 件 。live0 函 数 为 文件 页 面 附 
加 事件 处 理 程序 ， 规 定 事件 发 生 时 执行 的 函数 ， 例 如 下 面 的 代码 表示 当 id 为 second 的 页 面 发 
生 pagecreate 事件 时 ， 就 执行 相应 的 函数 : 


$("#second") .live('pagecreate', function() {..}); 


当 id 为 second 的 页 面 确 认 订 单 时 ， 将 会 把 订单 的 信息 保存 到 localStorage。 当 id 为 third 
的 页 面 加 载 时 ， 将 localStorage 存放 的 内 容 取 出 来 并 显示 在 id 为 message 的 <div> 组 件 中 。 代 
码 如 下 : 


$('#third') .live('pageinit', function() { 
var itemflavor = "房间 楼 层 : "+ localStorage.orderitem+"<br> 
是 否 带 窗户 : "+localSstorage .flavor+"<br> 是 否 需 接 送 : "+localstorage.flavorl+"<br> 
房间 数量 : "+localstorage .num+"<br> 客 户 联系 方式 : 
"+1LocalStorage .七 ext17 
$('#message') .html (itemflavor); 
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1); 


其 中 $(#message').html(itemflavor) 的 语法 作用 和 下 面 的 代码 一 样 ， 都 是 用 itemflavor 字符 
串 替 代 <div> 组 件 中 的 内 容 : 


document .getElementById("message") .innerHTML= itemflavor; 


23.3.3 ”连锁 分 店 页 面 
连锁 分 店 页 面 为 iansuo html， 主 要 代码 如 下 : 


<div data-role="page" data-title=" 全 国 连锁 酒店 " id="first" data-theme="a"> 
<div data-role="header"> 

<a href="index.html" data-icon="arrow-l1" data-iconpos="]left" data— 
ajax="false"> 回 首页 </a> 

<h1> 全 国 连 锁 酒 店 </h1> 

</div> 

<div data-role="content" id="content"> 
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<ul data-role="listview" data-inset="true"> 
<1i> 
<a href="#"” onclick="getmap(' 上 海 连锁 酒店 ')" id=btn> 
<img src="images/shanghai.png" /> 
<h3> 上 海 连锁 酒店 </h3> 
<p> 咨 询 热 线 : 19912345678</p> 
</a> 


</1i> 
<1i> 
<a href="#"” onclick="getmap(' 北 京 连锁 酒店 ')" id=btn> 
<img src="images/beijing.png" /> 
<h3> 北 京 连锁 酒店 </h3> 
<p> 咨 询 热线 : 18812345678</p> 
</a> 





</1i> 
<1i> 
<a href="#"” onclick="getmap(' 厦 门 连锁 酒店 ')" id=btn> 
<img src="images/xiamen.png" /> 
<h3> 厦 门 连锁 酒店 </h3> 
<p> 咨 询 热线 : 16612345678</p> 
</a> 


</1i> 
</ul> 


</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> 


连锁 酒店 总 部 热线 : 12345678 
</div> 
</div> 


预览 效果 如 图 24-14 所 示 。 





24-14 ”连锁 分 店 页 面 效果 


其 中 使 用 listview 组 件 来 完成 列表 的 功能 。 通 过 链接 的 方式 返回 到 首页 ，“ 回 首页 ”按钮 
代码 如 下 : 





JF 


<a href="index.html" data-icon="arrow-l1" data-iconpos="left" data— 
ajax="false"> 回 首页 </a> 


23.3.4 查看 订单 页 面 
查询 订单 页 面 为 dingdan html， 显 示 内 容 的 代码 如 下 ; 





page”data-title=" 订 单列 表 " id="first" data-theme="a"> 
"header"> 
<a hre index.html" data-icon="arrow-l1l" data-iconpos="left" data— 
ajax="false"> 回 首页 </a><h1> 订 单列 表 </h1> 
</div> 
<div data-role="content" id="content"> 
<a href="#" data-role="button" data-inline="true" onclick="deleteOrder();"> 
删除 订单 </a> 
以 下 为 您 的 订购 列表 : 
<div class="ui-grid-b"> 
<div class="ui-block-a ui-bar-a"> 房 间 楼 层 </div> 
<div class="ui-block-b ui-bar-a"> 是 否 带 窗户 </div> 
<div class="ui-block-b ui-bar-a"> 是 否 需 接送 </div> 


<div data-role 





<div data-role= 
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<div class="ui-block-a ui-bar-b" i orderitem"></div> 
<div class="ui-block-b ui-bar-b" i flavor"></div> 
<div class="ui-block-b ui-bar-b" id="flavorl"></div> 
<div class="ui-block-c ui-bar-a"> 订 购 数 量 </div> 
<div class="ui-block-c ui-bar-a"> 客 户 联系 方式 </div> 
<div class="ui-block-c ui-bar-a"></div> 
<div class="ui-block-c ui-bar-b" id="num"></div> 
<div class="ui-block-c ui-bar-b" id="textl"></div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> 
订购 专线 : 12345678 


</div> 


预览 效果 如 图 24-15 所 示 。 


开除 订 单 以 下 为 您 的 订购 列表 : 
房间 楼 层 ”是 否 带 窗户 。 是 否 需 接送 





二 楼 有 窗户 需要 接送 
订购 数量 客户 联系 方式 
26 123456789 


24-15 ”查看 订单 页 面 效果 
该 页 面 的 主要 功能 是 将 localStorage 的 数据 取出 并 显示 在 页 面 上 ， 主 要 由 以 下 代码 实现 : 
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<script type="text/javascript"> 
$("'#first') .live('pageinit', function() { 
$('#orderitem') .html (localStorage.orderitem); 
$('#flavor') .html (localStorage.flavor); 
$('#flavorl') .html (localStorage.flavorl); 
$('#num') .html (localStorage .num) 7 
$('#text1') .html (localStorage .上 extl) 7 
Ds; 
</script> 


通过 单 击 页 面 中 的 “删除 订单 ”按钮 ， 可 以 删除 订单 ， 删 除 功能 通过 以 下 函数 实现 : 


function deleteOrder (){ 
localSstorage.clear (); 
$(".ui-grid-b") .html ("已 取消 订单 1"); 








23.3.5 ”酒店 介绍 页 面 
酒店 介绍 页 面 为 about.html， 该 页 面 的 主要 代码 如 下 : 


<div data-role="page" data-title=" 全 国 连锁 酒店 "id="first" data-theme="a"> 
<div data-role="header"> 

<a href="index.html" data-icon="arrow-l1" data-iconpos="left" data- 
ajax="false"> 回 首页 </a><h1> 千 谷 连 锁 酒店 </h1> 

</div> 

<div data-role="content" id="content"> 


<img src="images/about.png" /><br> 
<font style="font-size:20px; "> 千 谷 连锁 酒店 集团 定位 于 全 国 连锁 高 级 酒店 的 发 展 ， 完善 的 酒 
店 预订 系统 , 让 您 预订 酒店 客房 更 加 轻松 快捷 , 是 您 出 差 、 旅 游 的 好 选择 。</font> 





</div> 

<div data-role="footer" data-position="fixed" style="text-align:center"> 
连锁 酒店 总 部 热线 : 12345678 

</div> 

</div> 


预览 效果 如 图 24-16 所 示 。 





级 酒店 的 发 展 ,完善 的 酒店 预订 系统 ， 
让 您 预订 酒店 客房 更 加 轻松 快捷 ,是 
您 出 差 、 旅 游 的 好 选择 。 


连锁 酒店 总 部 热线 : 12345678 


图 24-16 ”酒店 介绍 页 面 效果 


